Reactでの子コンポーネント破棄

実現したいこと

既に表示された子コンポーネントに対し、親画面(State)から再レンダリングを促したい

発生している問題・分からないこと

navigateにより、処理前→処理後が自画面遷移している為、Stateの変更を感知されないのかも知れませんが、解決策を見いだせないでいます。

該当のソースコード

import {useParams, useNavigate} from 'react-router-dom'; export function TestPage( props: {} ) { const navigate = useNavigate(); const (testId) = useParams(); //URLからの埋込パラメータ値取得 const data = [{id: 1, text: "aaa"},{id: 2, text: "bbb"}]; return ( <PageLayout> <div> <div>{/* 一覧 */} {(data ?? []).map((item, index) => ( <div onclick={ navigate(`/tests/${item.id}`);　 //←このnavigate先はこのコンポーネントそのもの }>{item.text}</div> ))} </div> <div>{/* ページ画面 */} 　　　　{testId ? //←この値が変わってる(navigateを介して遷移)はずなのに表示された＜TestPage＞が破棄されない・・ <TestPage testId={Number(testId)}/> : <></> } </div> </div> </PageLayout> ) }

試したこと・調べたこと

上記の詳細・結果

一旦、useState()を使ってtestIdをこのコンポーネント内でState管理してみましたが、同様に再レンダリングされませんでした。(navigateで遷移してる為、当然カモしれませんが)
子コンポーネント＜TestPage＞を常に表示させ、testIdを必ず渡し、propsでState変化を感知できるかと思いましたが、再レンダリングできませんでした。(無反応-子コンポーネント内にも入って来てない様子)

補足

ソースはJSXベースで、読みづらかったらすみません。