Значение состояния localStorage неопределенного после обновления

Я пытаюсь передать значение своего состояния на другую страницу и сохранить его в своем локальном хранилище. Состояние было сохранено, и оно работает при первом запуске приложения. Однако мое значение localStorage продолжает указывать undefined каждый раз, когда я обновляю страницу. Насколько я понимаю, значение localStorage всегда будет там, пока я не удалю значение в localStorage. Я попытался изменить свой оператор if/else внутри моей функции useEffect Hook. Вот мой код:

Я передаю состояние с этой страницы, используя:

<Link to = {{
                       pathname: "/product/description",
                       infoObj: {
                           text: "This is information passed on",
                           state: {
                               ...props
                           },
                       }
                   }}>
                        Product Description
                   </Link>

И я получаю доступ к состоянию с другой страницы и устанавливаю его в localStorage, используя:

useEffect(() => {
    const stateInfo = JSON.stringify(props.location.infoObj);
    localStorage.setItem("info", stateInfo);
}, [])

Вот как я получаю доступ к своему элементу в своем локальном хранилище:

useEffect(() => {
    const getInfo = JSON.parse(localStorage.getItem("info"));
    if (!localStorage.getItem("info") || getInfo.length === 0){
        try{
            localStorage.setItem("info", JSON.stringify(props.location.infoObj));
        } catch (err){
            console.info(err);
        }
    }
},[])

Очень ценю помощь от вас всех

🤔 А знаете ли вы, что...
С помощью JavaScript можно валидировать данные на стороне клиента, что улучшает пользовательский опыт.