Quiero configurar filtredMenu con elementos de datos de "menú" completos por useEffect pero cuando lo consuelo.log, da nulo. Cuando hago console.log (menú), funciona sin problemas, veo todos los elementos del menú en la consola. Filtraré el menú filtrado por botones de categoría más adelante. ¿Qué estoy haciendo mal?

Este es mi documento:

 import { useContext, useEffect, useState } from "react"; import MenuContext from "../context/MenuContext"; function Menu() { const { menu, setMenu } = useContext(MenuContext); const [filtredMenu, setFiltredMenu] = useState(null); useEffect(() => { setFiltredMenu(menu); console.log(filtredMenu) }, []); function handleMenu(e) { e.target.value !== "all" ? setFiltredMenu(menu.filter(item => item.category === e.target.value)) : setFiltredMenu(menu); } return ( <> {/* {filtredMenu.map((item) => ( <> <button key={item.id} value={item.category} onClick={handleMenu}> {item.category} </button> </> ))} */} {menu.map((item) => <div key={item.id}> <div> {item.title} </div> <div> {item.category} </div> <div> {item.price} </div> <div> {item.desc} </div> <img src={item.src} alt="image" /> </div> )} </> ) } export default Menu

Gracias.