Problem with <BrowserRouter> TS2769: No overload matches this call

Question

I got this error. I do not know how to solve, I did not see a suitable solution on the Internet. I'm new to typescript so I have no idea how to fix this. Initially, the project was on js, so it will be transferred to ts using ts-migrate. Now I am correcting errors due to the transfer.

Error code:

TS2769: No overload matches this call.   

Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
     
Type '{ children: (string | Element)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.
  
Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
     
Type '{ children: (string | Element)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.

Edit: delete "." after </div>
App.tsx

import React, {useEffect, useState, FC} from 'react';
import './styles/App.css';
import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
import Navbar from "./components/UI/Navbar/Navbar";
import AppRouter from "./components/AppRouter";
import {AuthContext} from "./context";

const App: FC = () => {
    const [isAuth, setIsAuth] = useState(false);
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
        if (localStorage.getItem('auth')) {
            setIsAuth(true)
        }
        setLoading(false);
    }, [])
    return (
        <AuthContext.Provider value={{
            isAuth,
            setIsAuth,
            isLoading}}>

            <BrowserRouter>
                <div>
                    <Navbar />
                <AppRouter/>

                </div>

            </BrowserRouter>

        </AuthContext.Provider>

    );
}

export default App;

Navbar.tsx

import React, {useContext} from 'react';
import {Link} from "react-router-dom";
import {AuthContext} from "../../../context";

const Navbar = () => {
    const {isAuth, setIsAuth} = useContext(AuthContext);

    const logout = () => {
        setIsAuth(false);
        localStorage.removeItem('auth')
    }

    return (
        <div className="navbar">

            <div className="navbar__links">
                <Link className='linkText' style={{marginLeft:'20px'}} to="/about" >О сайте</Link>
                <Link className='linkText' to="/posts">События</Link>
            </div>
            
        </div>
    );
};

export default Navbar;

AppRouter.tsx

import React, {FC, useContext} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import {privateRoutes, publicRoutes} from "../router";
import {AuthContext} from "../context";
import Loader from "./UI/Loader/Loader";
const AppRouter: FC = (props: any) => {
    const isAuth = useContext(AuthContext);
    const isLoading = useContext(AuthContext);
    if (isLoading) {
        return <Loader/>
    }
    return (
        isAuth
            ?

            <Switch>
                {privateRoutes.map(route =>
                    <Route
                        component={route.component}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Redirect to='/posts'/>
                {props.children}
            </Switch>

            :
            <Switch>
                {publicRoutes.map(route =>
                    <Route
                        component={route.component}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Redirect to='/login'/>
                {props.children}
            </Switch>
    );
};

export default AppRouter;

Context

import {createContext} from 'react'
export const AuthContext = createContext<any>([true,null,null]);

Version

@types/react": "^18.0.20",
@types/react-dom": "^17.0.2",
@types/react-router-dom": "^5.3.0"

Answer 1

I changed the version of react to 17.0.3 and it worked. Not the best solution, but at least it works.