Page re-render upon data change on other page

I am using Ionic 6 with React.
I have two router links match to the same page.
/messages/inbox and /message/trash share the same page MessagesList.tsx, which list all the messages from inbox or trash box respectively, retrieved from backend database using rest api.

It is Ok if I do the following:
step 1. when in /messages/inbox, use buttonto move a message to trash box, the message list on current page reflect the new list of messages. OK
step 2: then I route to /message/trash, I can see the message trashed from step 1 shows here, all trashed message are from database at this moment.

there is problem when I do the following:
step 1: /messages/trash to trash page, 2 trash messages. OK here
step 2: /messages/inbox, 5 messages, move a message to trash. 4 messages on page now. OK
step 3: go /messages/trash again, the page is still display 2 messages, same as step 1.

I think the page display in step 3 is from memory when the page was rendered in step 1.

Please advise the best way to re-render the page in step 3 so I can re-fetch the data from database, when data changes in step2.