Local storage doesn’t work on reload. Why?

I have a list of items that should be saved if they are open also an ‘active’ item that is currently previewed. Everything disappears on reload.

const Projects = () => {
    const [allProjectsOpen, setAllProjectsOpen] = useState(false);
    const [reactProjectsOpen, setReactProjectsOpen] = useState(false);
    const [angularProjectsOpen, setAngularProjectsOpen] = useState(false);
    const [openItems, setOpenItems] = useState([]);
    const [activeItem, setActiveItem] = useState(null);


    const projectItemsRef = useRef([
        {
            name: '_photo_portfolio',
            icon: <RiJavascriptFill className="w-6 h-6 text-custom-blue" />,
            type: 'react',
            component: PhotoPortfolio,
        },
        {
            name: '_angul_it',
            icon: <FaAngular className="w-6 h-6 text-custom-purple" />,
            type: 'angular',
            component: AngulIt,
        },
        {
            name: '_unknown_project',
            icon: <RiJavascriptFill className="w-6 h-6 text-custom-blue" />,
            type: 'react',
            component: UnknownProject,
        },
    ]);



    // Load state from localStorage
    useEffect(() => {
        const storedOpenItemNames = JSON.parse(localStorage.getItem('openItemNames')) || [];
        const storedActiveItemName = localStorage.getItem('activeItemName');

        const storedOpenItems = projectItemsRef.current.filter(item => storedOpenItemNames.includes(item.name));
        setOpenItems(storedOpenItems);
        setActiveItem(storedActiveItemName || null);
    }, []);


    // Save state to localStorage
    useEffect(() => {
        // Save state to localStorage when openItems or activeItem changes
        const openItemNames = openItems.map(item => item.name);
        localStorage.setItem('openItemNames', JSON.stringify(openItemNames));
        localStorage.setItem('activeItemName', activeItem);
    }, [openItems, activeItem]);



    // Add item to openItems
    const addItem = (item) => {
        setOpenItems((prevItems) => {
            // Prevent adding duplicates
            if (prevItems.some(prevItem => prevItem.name === item.name)) {
                return prevItems;
            }
            return [...prevItems, item]; // Add item to the openItems array
        });
        setActiveItem(item.name); // Set the newly added item as active
    };


    // Remove item from openItems
    const removeItem = (itemName) => {
        setOpenItems((prevItems) => prevItems.filter((prevItem) => prevItem.name !== itemName));
        if (activeItem === itemName) {
            setActiveItem(null); // Reset active item if it's removed
        }
    };

    return (
        <div>
            <div>
                <ItemList
                    items={openItems}
                    activeItem={activeItem}
                    setActiveItem={setActiveItem}
                    removeItem={removeItem} />
                <div>
                    {ActiveComponent && <ActiveComponent />}
                </div>
            </div>
        </div>
    );
};

I’m trying to save this to local storage so on reload it would have the list and the active item open. I can see it saves the items and active item to local storage but on reload everything disappears.