I want to set filtredMenu with items of full "menu" data by useEffect but when I console.log it, it gives null. When I do console.log(menu), it works without a problem, I see all menu items in the console. I will filter the filtredMenu by category buttons later. What am I doing wrong?

This is my document:

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

Thank you.