Hi! I'm trying to use a layout to render a sidebar as well as initialize a context provider. But it seems like useEffect is getting called on every page navigation and im not sure why since the docs say this:

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

How can i create a layout that preserves state on navigation and will not cause anything to re-render unnecessarily?

This is my component:
https://pastebin.com/kNjpHSnc