This is my Routes Config file

import React, { lazy, Suspense } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import { ROUTES } from "../constants/routes";
import { Icon } from '@chakra-ui/react';
import { MdBarChart, MdPerson, MdHome, MdLock, MdOutlineShoppingCart } from 'react-icons/md';

// Admin Imports
const PublicRoute = lazy(() => import("./PublicRoutes"));
const PrivateRoute = lazy(() => import("./PrivateRoutes"));
const Dashboard = lazy(() => import("views/admin/default"));
const NFTMarketplace = lazy(() => import("views/admin/marketplace"));
const Profile = lazy(() => import("views/admin/profile"));
const DataTables = lazy(() => import("views/admin/dataTables"));
const RTL = lazy(() => import("views/admin/rtl"));

const SignInCentered = lazy(() => import("views/auth/signIn"));

interface RoutesConfigProps {
  isAuthenticated: boolean;
}

const RoutesConfig: React.FC<RoutesConfigProps> = ({ isAuthenticated }) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        {/* Public Routes */}
        <Route
          path={ROUTES.LOGIN}
          element={
            <PublicRoute isAuthenticated={isAuthenticated} element={<SignInCentered />} />
          }
        />
        {/* Private Routes */}
        <Route
          path={ROUTES.DASHBOARD}
          element={
            <PrivateRoute
              isAuthenticated={isAuthenticated}
              element={<Dashboard />}
            />
          }
        />
        <Route
          path={ROUTES.MARKETPLACE}
          element={
            <PrivateRoute
              isAuthenticated={isAuthenticated}
              element={<NFTMarketplace />}
            />
          }
        />
        <Route
          path={ROUTES.PROFILE}
          element={
            <PrivateRoute isAuthenticated={isAuthenticated} element={<Profile />} />
          }
        />
        <Route
          path={ROUTES.ADMIN_DATA_TABLES}
          element={<PrivateRoute isAuthenticated={isAuthenticated} element={<DataTables />} />}
        />
        <Route
          path="/"
          element={
            isAuthenticated ? (
              <Navigate to={ROUTES.DASHBOARD} />
            ) : (
              <Navigate to={ROUTES.LOGIN} />
            )
          }
        />
        <Route
          path="*"
          element={
            isAuthenticated ? (
              <Navigate to={ROUTES.DASHBOARD} />
            ) : (
              <Navigate to={ROUTES.LOGIN} />
            )
          }
        />
      </Routes>
    </Suspense>
  );
};

export default RoutesConfig;

and this is my public routes file

import React from "react";
import { Route, Navigate } from "react-router-dom";

interface PublicRouteProps {
  isAuthenticated: boolean;
  element: React.ReactElement;
}

const PublicRoute: React.FC<PublicRouteProps> = ({ isAuthenticated, element }) => {
  return isAuthenticated ? <Navigate to="/dashboard" /> : element;
};

export default PublicRoute;

And this is my Private Routes file

import React from "react";
import { Route, Navigate } from "react-router-dom";

interface PrivateRouteProps {
  isAuthenticated: boolean;
  element: React.ReactElement;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ isAuthenticated, element }) => {
  return isAuthenticated ? element : <Navigate to="/login" />;
};

export default PrivateRoute;

And the error which is arising is

ERROR in src/routes/RoutesConfig.tsx:74:11
TS2769: No overload matches this call.
Overload 1 of 2, ‘(props: RouteProps<string, { [x: string]: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string; }>>): Route<{}, string>’, gave the following error.
Type ‘{ path: string; element: Element; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, string>> & Readonly<RouteProps<string, { [x: string]: string; }> & OmitNative<…>>’.
Property ‘element’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, string>> & Readonly<RouteProps<string, { [x: string]: string; }> & OmitNative<…>>’.
Overload 2 of 2, ‘(props: RouteProps<string, { [x: string]: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string; }>>, context: any): Route<…>’, gave the following error.
Type ‘{ path: string; element: Element; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, string>> & Readonly<RouteProps<string, { [x: string]: string; }> & OmitNative<…>>’.
Property ‘element’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, string>> & Readonly<RouteProps<string, { [x: string]: string; }> & OmitNative<…>>’.
72 | <Route
73 | path=”*”
74 | element={
| ^^^^^^^
75 | isAuthenticated ? (
76 |
77 | ) : (

I Tried upgrading to the latest version of react router dom but still it is not working?