Hey Everyone! Can someone please help me out here?

I am creating a simple Next.js application which is a movie review website. So a user can add a movie and add a particular review to a movie. I have created a Movie schema and stored each movie's data in MongoDB. In the home page, all the movies in the db are pulled from backend and displayed there. Now I can click on a single movie card and it will open up the details of the movie in a new page (I am using Next.js page based routing). I can again pull this movie's data from db but it will be an extra call since I have already pulled it to render all the movies. So I am using context to store the movie data in the context when the card is clicked and I want to access this context in the other page to get the movie data. However I am facing this error. Can someone please help me?

The VSCode image contains the code where I am setting the context whenever the card is being clicked. At that point the code works exactly as expected. However when I am trying to do the same thing when accessing the context, it is failing.

I am getting a feeling that I have not wrapped the entire application under context correctly, but I have wrapped layout.tsx within the context. I don't know how to wrap anything further than this

This is the file structure of the code.