react router dom Link is not working with with the material ui

Question

Whenever, I am trying to use the Link in the react material ui component. I am getting the below error.

Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Categories from './components/Categories';
import Header from './components/Header';
import ProductPage from './components/ProductPage';
import AppTopMenu from './components/AppTopMenu';
import WishList from './components/users/WishList';
import UserLogin from './components/users/UserLogin';
import Profile from './components/users/Profile';
import UserLogout from './components/users/UserLogout';
import UserRegister from './components/users/UserRegister';
import PlaceOrder from './components/users/PlaceOrder';
import Wishlist from './components/mui/Wishlist';
import Payment from './components/payment-integration/Payment';

import ProtectedRoute from './auth/ProtectedRoute';


class Home extends Component {

    render() {
        return (
            <>
                <div className='app_main_container'>
                    <div className='sidebar_container'>
                        <Header />
                    </div>
                    <div className='content_container'>
                       **// If I remove this below one line error gets solved.**
                        <Link to="/user/login"></Link>
                        <AppTopMenu />
                        <Router>

                            <Routes>
                                <Route exact path="/" element={<Categories />}></Route>
                                <Route exact path="/user/wishlist" element={<WishList />}></Route>
                                <Route exact path="/user/register" element={< UserRegister/>}></Route>
                                <Route exact path="/user/login" element={< UserLogin/>}></Route>
                                <Route exact path="/user/logout" element={< UserLogout/>}></Route>
                                <Route exact path="/user/profile" element={<ProtectedRoute Component={Profile} />}></Route>
                                <Route exact path="/user/:userid/:product_id" element={< UserLogin/>}></Route>
                                <Route exact path="/user/product/order/:product_id" element={<ProtectedRoute Component={PlaceOrder} />}></Route>
                                <Route exact path="/:cat/:pro_name/:pro_id" element={<ProductPage />}></Route>
                            </Routes>
                        </Router>
                    </div>
                </div>
            </>
        )
    }
}

export default Home;