error with returning Navigate in react router dom

There is one bug in my code and I don’t understand why it is happening. Can you please help.

My code:

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import AuthenticationStorageService from "../utils/AuthenticationStorageService";

const isUserLoggedIn = AuthenticationStorageService.isUserLoggedIn();
const ProtectedRouteGuest = () => {
  return isUserLoggedIn ? <Navigate to="/profile" /> : <Outlet />;
};

export default ProtectedRouteGuest;

error: