typescriptで各コンポーネントで使用している同じIF分を共通化したい

実現したいこと

ここに実現したいことを箇条書きで書いてください。

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

useEffect内のif文を共通化して、呼び出して使用する形に変更したいです。
ただ、各コンポーネントやif文で参照している「useTestData(teat)」の値をどうやって
渡せばよいかわからず…。

お知恵をいただけると幸いです。

該当のソースコード

コンポーネントA export const TestA = () => { const {error} = useTestData(teat) useEffect(() => { if(error?.message === 'TEST-A'){ navigate('/', {state: {message: 'testA'}}) }else if(error?.message === 'TEST-B'){ navigate('/error', {state: {message: 'testB'}}) }else if(error){ navigate('/', {state: {message: 'testC'}}) } },[error]) return ( <></> ) }

コンポーネントB export const TestB = () => { const {error} = useTestData(teat) useEffect(() => { if(error?.message === 'TEST-A'){ navigate('/', {state: {message: 'testA'}}) }else if(error?.message === 'TEST-B'){ navigate('/', {state: {message: 'testB'}}) }else if(error){ navigate('/', {state: {message: 'testC'}}) } },[error]) return ( <></> ) }

useEffectの中身を共通化したいコンポーネント import { ApolloError, ServerError, ServerParseError } from "@apollo/client" import { MESSAGES } from "../../config/messages" import { useNavigate } from "react-router" type Props = { error?: ApolloError | undefined, } export const TestHandler = ({error}: Props) => { if(error?.message === 'TEST-A'){ navigate('/', {state: {message: 'testA'}}) }else if(error?.message === 'TEST-B'){ navigate('/', {state: {message: 'testB'}}) }else if(error){ navigate('/', {state: {message: 'testC'}}) } }

試したこと

上記のように、「TestHandler」コンポーネントにpropsで渡してみたのですが、「型 'ApolloError | undefined' の引数を型 'Props' のパラメーターに割り当てることはできません。
型 'undefined' を型 'Props' に割り当てることはできません。」と型で怒られます。

そもそもpropsで渡す形が正しいのでしょうか？
お知恵をいただけると幸いです。