Tengo este problema con React donde intento mostrar un menú desplegable de selección con fechas almacenadas en mi base de datos. Los datos se obtienen con éxito y los estados también se actualizan, se pueden registrar en la consola. Sin embargo, el menú desplegable de selección no se representa como debería:

 function Home(){ const [userdata, setUserdata] = useState(); const [historyLogs, setHistoryLogs] = useState(); useEffect(() => { async function firstRun(){ var userdata = await (await fetch("/me")).json(); var historyLogs = [] firebase.database().ref(userdata.id).once("value", function(snapshot){ snapshot.forEach(child => { historyLogs.push(child.key); })}); setHistoryLogs(historyLogs); setUserdata(userdata); } firstRun(); }, []) function aver(){ console.log(historyLogs); } if(!userdata || !historyLogs){ return null } else{ return ( <React.Fragment> <button onClick={aver}>aver</button> <header> <img src={logo} height="50px" alt="logo"/> <select id="cars" name="carlist" form="carform"> <option value="volvo" selected>volvo</option> { historyLogs.map(log => { return <option>{log}</option> }) } </select> <div className="user-info"> <img src={userdata.img} height="50px" style={{borderRadius:"50%"}} alt="user img"/> <p>{userdata.name}</p> </div> </header> <Toptracks userdata={userdata}/> </React.Fragment> ) } } export default Home;

Con el código que tengo, el menú desplegable se muestra sin mostrar la lista de registros históricos, por lo que solo muestra esto:

y esto debería mostrarse dentro (consola registrada):

 (2) ["2021-7-25", "2022-7-25"]

Interesantemente, descubrí que si realizo algún cambio en el código con mi servidor local en ejecución, se actualiza como debería ser en primer lugar:

Cualquier ayuda es muy apreciada :)