ReduxToolkitでリクエストをキャンセルしたい

前提

React ReduxToolkitを使用してSPAのサイトを作成しています
（非同期通信にはaxiosを使用）

実現したいこと

1回のリクエストに１０秒ほどかかる処理があり、その処理の途中で別画面に遷移したとき、前回のリクエストを中止したいです

発生している問題・エラーメッセージ

1回目のリクエストの処理中に別画面に遷移すると、２回目のリクエスト処理が動き、2回目のレスポンスが先に返却されます
その後、遅れて１回目のレスポンスが画面に現れてしまいます
最後にリクエストした返却値を画面で表示させたいので、初回リクエストの処理を中止したいです

該当のソースコード

fetchSlice.js

export const fetchMonitorPost = createAsyncThunk( 'monitor/post', async (arg, thunkAPI) => { const { userId } = thunkAPI.getState().user; const res = await axios.post(`${apiUrl}monitoring`, { user_id: userId, }); return res.data; } );

Buttoncomponentでチャンネルが変わるとリクエストを投げるようにしています。

ButtonComponent.js

const [channnel, setChennel] = useState('1') useEffect(() => { dispatch(fetchMonitorPost ()); }, [channel]);

試したこと

cancelトークンを使用してみようと思ったのですが、ReduxToolkitでの書き方が分かりませんでした。

よろしくおねがいします