useIonViewWillEnter strange behaviour

Hi all, I’m new to this Ionic Framework and React JS. So I have this one scenario when building my mobile app using the framework with react. I will illustrate the scenario with pictures below.

I have this records page

And when I press on one of the records it should navigate to the BoxDetails/:id and inside this BoxDetails page, I use useIonViewWillEnter, inside it I fetch my data from firebase

So the strange behavior is, when im navigating between pages, the components that render base on the data fetch from firestore are render when I properly press the back button on the toolbar to return to the records page. However, it will not render properly when I direct press any of the tabs at the bottom of the page and go to records page, and try to enter any of the records. And it seems like still storing the previous details.

Anyone encounter the similar issue? Your comments are very much appreciated.