Next.js with Router DOM

I want to take the result of the code in navigation but it seems to return an horrible error: Unhandled Runtime Error

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

"use client";
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from '@/components/main/Main';
import Sidebar from "@/components/sidebar/Sidebar";
import { Blog } from "@/pages/blog/Blog";

export default function Home() {
  return (
    <BrowserRouter>
      <Sidebar />
      <Main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blog/[id]" element={<Blog />} />
        </Routes>
      </Main>
    </BrowserRouter>
  )
}

I tried to take the result but i can’t please help me