How to reset the state in react when component is rendered or shown?

Question

I am trying to do the pagination part in my app, however the data is correct, but the only issue is when I try to call or show a component i.e Trending.jsx on click of a button(Most Popular) and ( type of toggle button), at first it gets the correct page number, but when I hide that Trending.jsx component the page numbers remains the same, on my default page/component which is Movie.jsx

However, I want to reset page number if the component is not shown and start from 1 when a user clicks to see Trending.jsx and viceVersa

Please see the link to code sand box for the code I tried. https://codesandbox.io/s/moviehunt-demo-forked-rhom0?file=/src/components/Movies/Movies.jsx

Full live app: https://rhom0.csb.app/movies

Thanks for the help.