how to fix cannot render a <Router> inside another <Router> error?

I am new using react and i have a small app to build , i have done the backend RestApi and now i started to build the frontend using react here is some of the code of the frontend

App.js:

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';

import Navbar from './components/Navbar';
import ProductTypeList from './components/ProductTypeList';
import ProductTypeForm from './components/ProductTypeForm';
import ProductList from './components/ProductList';
import ProductForm from './components/ProductForm';

import axios from 'axios';

function App() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/product-types');
  };

  const [productTypes, setProductTypes] = useState([]);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/product-types')
      .then(res => setProductTypes(res.data))
      .catch(err => console.log(err));

    axios.get('http://localhost:3001/products')
      .then(res => setProducts(res.data))
      .catch(err => console.log(err));
  }, []);

  const handleAddProductType = (newProductType) => {
    setProductTypes([...productTypes, newProductType]);
  };

  const handleUpdateProductType = (updatedProductType) => {
    const updatedProductTypes = productTypes.map(productType => {
      if (productType.id === updatedProductType.id) {
        return updatedProductType;
      }
      return productType;
    });
    setProductTypes(updatedProductTypes);
  };

  const handleDeleteProductType = (deletedProductTypeId) => {
    axios.delete(`http://localhost:3001/product-types/${deletedProductTypeId}`)
      .then(() => {
        const updatedProductTypes = productTypes.filter(productType => productType.id !== deletedProductTypeId);
        setProductTypes(updatedProductTypes);
      })
      .catch(err => console.log(err));
  };

  const handleAddProduct = (newProduct) => {
    setProducts([...products, newProduct]);
  };

  const handleUpdateProduct = (updatedProduct) => {
    const updatedProducts = products.map(product => {
      if (product.id === updatedProduct.id) {
        return updatedProduct;
      }
      return product;
    });
    setProducts(updatedProducts);
  };

  const handleDeleteProduct = (deletedProductId) => {
    axios.delete(`http://localhost:3001/products/${deletedProductId}`)
      .then(() => {
        const updatedProducts = products.filter(product => product.id !== deletedProductId);
        setProducts(updatedProducts);
      })
      .catch(err => console.log(err));
  };


  return (
    <BrowserRouter>
      <div className="container">
        <Navbar />
        <Routes>
          <Route path="/" element={<h1>Welcome to the Product Manager</h1>} />
          <Route path="/product-types" element={
            <>
              <ProductTypeList productTypes={productTypes} onDeleteProductType={handleDeleteProductType} />
              <ProductTypeForm onAddProductType={handleAddProductType} />
            </>
          } />
          <Route path="/product-types/:id" element={<ProductTypeForm productTypes={productTypes} onUpdateProductType={handleUpdateProductType} />} />
          <Route path="/products" element={
            <>
              <ProductList products={products} onDeleteProduct={handleDeleteProduct} />
              <ProductForm productTypes={productTypes} onAddProduct={handleAddProduct} />
            </>
          } />
          <Route path="/products/:id" element={<ProductForm productTypes={productTypes} onUpdateProduct={handleUpdateProduct} />} />
        </Routes>
        <button onClick={handleButtonClick}>Go to Product Types</button>
      </div>
</BrowserRouter>
);
}

export default App;

and index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

reportWebVitals();

and after starting the app using npm start nothing show on the screen and i get this error on the console :

caught Error: You cannot render a <Router> inside another <Router>. 
You should never have more than one in your app.

How can i fix this error ?

>Solution :

There is no point in having the router in your index.js because you already declared and set the routes inside your App component, which is also the usual way of using it:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

reportWebVitals();

The code above should fix your problem.