Estoy tratando de cambiar la URL de origen de una etiqueta de video al presionar un botón, pero no tengo suerte. Aquí está el código:

 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>

Como puede ver, también intenté crear una función para devolver el src correcto, pero me dio un error. ¿Cómo debo abordar este problema?