ReactのuseNavigateの使い方が分からない

Question

前提・実現したいこと

ReactでuseNavigateを使って遷移先にデータを渡し、遷移先でそのデータの参照をしたい

該当のソースコード

//遷移前
import { useNavigate} from 'react-router-dom';
...
useNavigate("/after",{
   data: 'Hello',
});
...

//遷移後
...
import { useRoute } from 'react-router-dom';

const route = useRoute();

return(
   <div>{route.params.data}<div>
)
...

どうやらこれだとuseRouteがないと言われたのですが、調べてもどれがv5かv6わからないので教えてください。

補足情報（FW/ツールのバージョンなど）

react-router@v6