Como sugiere el título, tengo problemas para actualizar el estado con un menú de selección. No estoy seguro de si el problema proviene del hecho de que estoy tratando de actualizarlo desde varias fuentes.

getSurvivorPerks obtiene una matriz de objetos. En la carga de la página, se seleccionan 4 aleatorios para que se muestren, y estos cuatro se aleatorizan en cada handlesubmit. Me gustaría poder seleccionar manualmente las ventajas individuales para la ventaja 1, 2, etc. con un menú de selección. A partir de ahora, esto solo da como resultado que perk1 se establezca en Nulo. Los datos se muestran correctamente en el menú de selección.

 export default function SurvivorRandomizer() { const [survivorPerk1, setSurvivorPerk1] = useState({}); const [survivorPerk2, setSurvivorPerk2] = useState({}); const [survivorPerk3, setSurvivorPerk3] = useState({}); const [survivorPerk4, setSurvivorPerk4] = useState({}); const [perkList, setPerkList] = useState([]); const [loading, setLoading] = useState(true); const { user } = useUser(); useEffect(() => { const fetchData = async () => { const data = await getSurvivorPerks(); let perks = randomPerks(data); setPerkList(data); setSurvivorPerk1(perks[0]); setSurvivorPerk2(perks[1]); setSurvivorPerk3(perks[2]); setSurvivorPerk4(perks[3]); setLoading(false); }; fetchData(); }, []); const handleSubmit = () => { let perks = randomPerks(perkList); setSurvivorPerk1(perks[0]); setSurvivorPerk2(perks[1]); setSurvivorPerk3(perks[2]); setSurvivorPerk4(perks[3]); }; if (loading) return <h1>loading...</h1>; return ( <> <div className="perk-row-1"> <div className="perk-card"> <PerkCard {...survivorPerk1} /> <select value={perkList.perk} onChange={(e) => setSurvivorPerk1(e.target.value)}> <option>Select...</option> {perkList.map((perk) => ( <option key={uuid()} value={perk}> {perk.name} </option> ))} </select> </div>