Как изменить содержимое HTML Div при нажатии кнопки с помощью Javascript?

Я хочу, чтобы пользователь мог нажать кнопку, которая изменит содержимое div. Я создаю футбольный состав, где каждая кнопка представляет расстановку, и когда они нажимают кнопку, содержимое div изменится, отражая формирование состава. Вот как выглядит страница до нажатия кнопкиВот как я хочу, чтобы страница выглядела после того, как пользователь нажмет кнопку 4-3-3

Я попытался сделать это, чтобы проверить, будут ли работать основы:

    const changeText = () => {
        document.getElementsById("changer").innerHTML = "you clicked me"
      }
    <button onClick = {changeText()}>4-3-3</button>
    <div ref = {contentRef} className = "col-9" id = "changer">
                <SoccerLineUp
                  size = {"fill"} //responsive
                  color = {"green"}
                  pattern = {"lines"}
                  homeTeam = {homeTeam}
                />
              </div>

Однако, когда я это сделал, страница была пустой.

Вот мой полный код для справки:

export default function App() {
  const [state, setState] = useState({
    color: "588f58",
    pattern: "lines",
    showHomeTeam: false, //idk what this does
    homeTeamColor: "f08080",
    homeTeamNumberColor: "ffffff",
    homeGoalkeeperColor: "d6cb65",
    homeGoalkeeperNumberColor: "333333",
    nameColor: "ffffff"
  });

  const [error, setError] = useState(null);
  const [homeTeam, setHomeTeam] = useState(
    localStorage.getItem("homeTeam") === null
      ? {
        squad: {
          gk: null,
          df: [],
          cdm: [],
          cm: [],
          cam: [],
          fw: []
        },
        style: {
          color: `#${state.homeTeamColor}`,
          numberColor: `#${state.homeTeamNumberColor}`,
          nameColor: `#${state.nameColor}`
        }
      }
      : JSON.parse(localStorage.getItem("homeTeam"))
  );

  const [number, setNumber] = useState(1);
  const [playerName, setPlayerName] = useState("");
  const [playerTeam, setPlayerTeam] = useState("homeTeam");
  const [playerPosition, setPlayerPosition] = useState("gk"); //why?

  const handlePlayerNameChange = (event) => {
    setPlayerName(event.target.value);
  };

  const handlePlayerPositionChange = (event) => {
    setPlayerPosition(event.target.value);
  };

  const removePlayer = (team, position, id) => {
    if (position === "gk") {
      setHomeTeam((homeTeam) => ({
        ...homeTeam,
        squad: { ...homeTeam.squad, gk: null }
      }));
    } else if (position === "df") {
      setHomeTeam((homeTeam) => ({
        ...homeTeam,
        squad: {
          ...homeTeam.squad,
          df: homeTeam.squad.df.filter((player) => player.id !== id)
        }
      }));
  };

  const addPlayer = () => {
    setError(null);
    if (playerName === "") {
      setError("Player Name required!");
    }
    else if (1 + homeTeam.squad.df.length + homeTeam.squad.cdm.length >= 11) {
      setError("Squad is full!");
    }
    else {
      let playerObj = {
        id: nanoid(),
        number: number,
        name: playerName,
        color: `#${state.homeTeamColor}`,
        numberColor: `#${state.homeTeamNumberColor}`,
        namecolor: `#${state.nameColor}`
      };
      if (playerPosition === "gk") {
        if (homeTeam.squad.gk !== null) {
          setError("goal keeper is full!");
        } else {
          playerObj.onClick = () =>
            removePlayer("homeTeam", "gk", playerObj.id);
          setHomeTeam((homeTeam) => ({
            ...homeTeam,
            squad: { ...homeTeam.squad, gk: playerObj }
          }));
        }
      } else if (playerPosition === "df") {
        if (homeTeam.squad.df.length === 5) {
          setError("defence is full!");
        } else {
          playerObj.onClick = () =>
            removePlayer("homeTeam", "df", playerObj.id);
          setHomeTeam((homeTeam) => ({
            ...homeTeam,
            squad: {
              ...homeTeam.squad,
              df: [...homeTeam.squad.df, playerObj]
            }
          }));
        }
      }
    }
    setNumber(number + 1);
  };

  const changeText = () => {
    document.getElementsByClassName("changer").innerHTML = "you clicked me"
  }

  return (
    <>
      <nav class = "navbar navbar-expand-lg navbar-dark">
        <div class = "container-fluid">
          <div className = "logoHeader">
            <button className = "navButton">DreamElevenBuilder</button>
          </div>
          <div class = "collapse navbar-collapse" id = "navbarNavAltMarkup">
            <ul>
              <li><a className = "socialIcons" href = "a" <FontAwesomeIcon icon = {fa} /></a></li>
            </ul>
          </div>
        </div>
      </nav>

      <div className = "containerFluid" >
        <div className = "row">
          <div className = "col-2">
            <form className = "userForm">
              <div className = "formRow">
                <div className = "formError">
                  {error !== null ? (
                    <div
                      className = "alert alert-danger p-2 m-0"
                      role = "alert"
                    >
                      {error}
                    </div>
                  ) : null}
                </div>
                <div>
                  <label htmlFor = "playerName"><b>Player Name</b></label>
                  <input
                    type = "text"
                    className = "form-control"
                    id = "playerName"
                    placeholder = "Player Name"
                    value = {playerName}
                    onChange = {handlePlayerNameChange}
                  />
                </div>
                <fieldset>
                  <div>
                    <label className = "col-form-label">
                      <b>Player Position</b>
                    </label>
                    <div>
                      <button onClick = {changeText()}>4-3-3</button>
                      <div className = "form-check">
                        <input
                          className = "form-check-input"
                          type = "radio"
                          value = "df"
                          id = "df"
                          checked = {playerPosition === "df"}
                          onChange = {handlePlayerPositionChange}
                        />
                        <label className = "form-check-label" htmlFor = "gridRadios1" for = "df">
                          Defence
                        </label>
                      </div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </form>
            <div className = "buttonPosition">
              <button className = "addButton" onClick = {addPlayer}>
                Add Player
              </button>
            </div>
            <hr />
          </div>
          <div ref = {contentRef} className = "col-9" id = "changer"> 
                //THIS IS THE DIV I WANT TO CHANGE WHEN THE USER CLICKS THE BUTTON.
            <SoccerLineUp
              size = {"fill"} 
              color = {"green"}
              pattern = {"lines"}
              homeTeam = {homeTeam}
            />
          </div>
        </div>

Я жестко запрограммировал значения, чтобы получить формирование. Мне было интересно, войдет ли это в внутренний HTML, чтобы все заработало? Ценности, жестко запрограммированные для формирования 4-3-3