Gatsby: State of context is lost after using <Link> or navigate()

[dagoss]

I'm using the react context API to store some application-wide state information. This works fine on a single page.

However, if I use <Link> or navigate() to go to a different page, and then use the react dev tools to look at the context provider, its state is completely gone.

Is that the expected behavior? If yes, what is the alternative to using the context API?

[dagoss]

I found this blog post that shows an example of using context with gatsby.

The issue was that I put the in the root layout, thinking that was sufficient. I actually needed to put it in gatsby-browser.js

import React from 'react';                 
import PropTypes from 'prop-types';        
import "./src/css/style.css";              
import ProfileContext from "./src/context/profile/profile-state"; 

export const wrapRootElement = ({ element }) => ( 
   <ProfileContext>{element}</ProfileContext> 
)                                          

wrapRootElement.propTypes = {              
  element: PropTypes.node                  
}