NextJS: fetched data lost after reloading different route than the one used to fetch the data

Question

I have this file structure:

├── _app.tsx
│   ├── profile               
│   │   │── index.tsx         
│   │   └── edit              
│   │        └── index.tsx          

And I am fetching profile data inside the profile component index.tsx and saving it to state using recoil and I am using localStorage id to make the request.

The problem that I am facing:

If I refresh the /profile/edit page I lose the profile data, I dont know if this is even possible to make.