Hi ! i'm getting this error in this code ( i'm not sure it's in this code but but it's more likely )
i'm still a beginner to next ts so feel free to tell me if i'm doing something wrong

import React from 'react'
import type { NextPage } from 'next'
import { BrowserRouter } from 'react-router-dom';
import { MainRoutes } from '@/src/routes';

const Home: NextPage = () => {
    console.log("Home zozo 1")
    return (
        <BrowserRouter>
            <MainRoutes />
        </BrowserRouter>
    )
}

export default Home

here's my mainroutes component

import React from "react"
import { useEffect } from "react"
import { useState } from "react"
import { getLocalStorageItem } from "../utils/localStorage"
import { authorizedRoutes } from "./authorized"
import { unauthorizedRoutes } from "./unauthorized"
import { sharedRoutes } from "./shared"
import { useRoutes } from "react-router-dom"

export const MainRoutes = () => {
    const [authorized, setAuthorized] = useState<boolean>(false)
    const [routes, setRoutes] = useState<any>([])

    useEffect(() => {
        if(getLocalStorageItem("loggedIn") === "true") {
            setAuthorized(true)
        }
    }, [])
    
    useEffect(() => {
        if (authorized) {
            setRoutes(authorizedRoutes)
        } else {
            setRoutes(unauthorizedRoutes)
        }
    }, [authorized])

    const element = useRoutes([...routes, ...sharedRoutes])
    return <>{element}</>
}