Почему возникает ошибка 'OnlyAuthComponent' cannot be used as a JSX component.?

Question

[zitSuccess]

Есть компоненты, которая проверяет авторизован ли юзер. На js она работает нормально, но на ts выдает ошибку: 'OnlyAuthComponent' cannot be used as a JSX component.
Its return type 'string | number | boolean | ReactFragment | Element | null | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
Я недавно только начал писать на ts и не могу понять почему так происходит.
Вот код компоненты:

interface OnlyAuthComponentProps {
    isAuth: boolean;
    children: React.ReactNode
}

function OnlyAuthComponent ({children, isAuth}: OnlyAuthComponentProps) {
    return isAuth ? children : <React.Fragment><Navigate to={"/auth/login"} /></React.Fragment>;
};

export default OnlyAuthComponent;

Код app.tsx

<Route path='profile' element={<OnlyAuthComponent isAuth={props.isAuth} children={<ProfileContainer />} />}>
                        <Route path='home' element={<ProfileMain />}/>
                        <Route path='favorite' element={<ProfileFavorite />}/>
                    </Route>

Answer 1

[zitSuccess]

Нашел решение:

interface OnlyAuthComponentProps {
    isAuth: boolean;
    children: JSX.Element
}