ContextAPI теряет состояние при перезагрузке страницы и при открытии в новой вкладке

Question

Я занимаюсь созданием приложения с рецептами и использую контекстный API, чтобы гарантировать, что данные, которые я получил в результате вызова API, доступны во всех моих компонентах. Все работает как надо на первый взгляд.

Проблема в том, что когда я перезагружаю / открываю компонент (они зависят от состояния, которое передается от поставщика контекста) на новой вкладке, все ломается, поскольку состояние пустое.

Я проверил переполнение стека для ответов, но ни один из них, похоже, не дает ответа, который не является взломанным. Есть ли у кого-нибудь советы о том, как я могу сохранить мои данные в contextApi после перезагрузки?

Пример компонента, который выходит из строя из-за этой проблемы, показан ниже.

import React, { useContext } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import RecipeCard from '../RecipeCard/RecipeCard';
import './ResultsPage.css';
import NavBar from '../NavBar/NavBar';
import { CocktailContext } from '../../context/CocktailContext';
import { v4 as uuidv4 } from 'uuid';
import LayOut from '../LayOut/LayOut';

export default function ResultsPage(props) {
    const { recipes } = useContext(CocktailContext);
    const drink = props.match.params.name;

    return (
        <LayOut>
            <Container fluid className="ResultsPage ">
                <NavBar />
                <Col sm={12} className="ResultsPage-header-content">
                    <p className="ResultsPage-p font-style-2">You know what's always a good idea?</p>
                    <h1 className="ResultsPage-h2 font-style-1">{props.match.params.name.toUpperCase()}!</h1>
                </Col>
                <Row>
                    <Col>
                        <Row className="ResultsPage-recipe-cards mb-5">
                            {recipes &&
                                recipes.map((recipe) => (
                                    <RecipeCard
                                        strDrink={recipe.strDrink}
                                        strDrinkThumb={recipe.strDrinkThumb}
                                        strGlass={recipe.strGlass}
                                        drink={drink}
                                        key={uuidv4()}
                                    />
                                ))}
                        </Row>
                    </Col>
                </Row>
            </Container>
        </LayOut>
    );
}