NextJS - Sensitive Provider only in specific pages - next.js

Question

I have a question regarding the usage of Contexts in a Next.js application.
I wrote one Context (called WalletContext) which loads/stores data from one protected API.
export function WalletProvider({ children }: WalletProviderProps) {
const [transactions, setTransactions] = useState<Transactions[]>([]);
useEffect(() => {
// fetch data from API (using JWT)
setTransactions(...);
}, []);
return (
<WalletContext.Provider value={{ transactions }}>
{children}
</WalletContext.Provider>
);
}
export const WalletContext = createContext({} as WalletContextData);
export const useWallet = () => useContext(WalletContext);
To use this context, I found two approaches:
Approach 1: surround the entire App
File _app.tsx:
<WalletProvider>
<Component {...pageProps} />
</WalletProvider>
Pros:
only one API request is made when navigating between protected pages (the state persists).
Cons:
exposing the Provider for non-authenticated users, in non-protected pages
having to add if(s) inside the provider to check the user is authenticated in order to decide if it is necessary to call the API or not
Approach 2: not surround the App, but only the specific pages or components
File protected-page-1.tsx:
<WalletProvider>
<Page1 />
</WalletProvider>
File protected-page-2.tsx:
<WalletProvider>
<Page2 />
</WalletProvider>
File public-page-3.tsx:
<Page3 />
Pros:
exposing the Provider only for authenticated users
not having to add if(s) to decide if the API should be requested or not
Cons:
every time the user navigates from one protected page to another protected page, the API request is performed again (losing the context state)
Am I missing something? Is there a better way to handle this?