How to use a context for the page, but a new one for each request?

[JorgeSivil]

The problem I'm having is that I created this

import {useContext} from "react";
import {UserContext} from "../lib/Context/UserContext"
import {ListContext} from "../lib/Context/ListContext"

export default function RankerApp({Component, pageProps}) {
    const [userState, setUserState] = useContext(UserContext)();
    const [listState, setListState] = useContext(ListContext)();

    if (pageProps.user && !userState.loaded) {
        setUserState({...userState, ...pageProps.user, loaded: true})
    }
    if (pageProps.list && !listState.loaded) {
        setListState({...listState, ...pageProps.list, loaded: true})
    }

    return (
        <ListContext.Provider value={[listState, setListState]}>
            <UserContext.Provider value={[userState, setUserState]}>
                <Component {...pageProps} />
            </UserContext.Provider>
        </ListContext.Provider>
    );
}

However the data from UserContext and ListContext is being shared across requests, even for different browsers

How can I make them be new instances for each request?