I am trying to change the source url of a video tag when pressing a button, but I don't have any luck. Here is the code:

  const [bg1, setBg1] = useState(true);
  const [bg2, setBg2] = useState(false);
  const [bg3, setBg3] = useState(false);

  const bg1Active = () => {
    setBg1(true);
    setBg2(false);
    setBg3(false);
  };
  const bg2Active = () => {
    setBg1(false);
    setBg2(true);
    setBg3(false);
  };
  const bg3Active = () => {
    setBg1(false);
    setBg2(false);
    setBg3(true);
  };
  const getBackground = () => {
    console.log("here");
    // if (bg1) return bgGold;
    // else if (bg2) return bgBlue;
    // else return bgRed;
  };

<div className="buttonContainerRight">
        <img
          onClick={() => bg1Active()}
          alt="bg1"
          src={bg1 ? god1En : god1Dis}
          style={{ pointerEvents: "all" }}
        ></img>

        <img
          onClick={() => bg2Active()}
          alt="bg2"
          src={bg2 ? god2En : god2Dis}
        ></img>
        <img
          onClick={() => bg3Active()}
          alt="bg3"
          src={bg3 ? god3En : god3Dis}
        ></img>
      </div>

<video className="video" loop="true" autoplay="autoplay" muted>
        {bg1 === true && <source src={bgGold} type="video/mp4" />}
        {bg2 === true && <source src={bgBlue} type="video/mp4" />}
        {bg3 === true && <source src={bgRed} type="video/mp4" />}
</video>

As you can see I also tried creating a function to return the right src, but it gave me an error. How should I tackle this problem?