Error You should not use NavLink outside a Router?

Question

React

Good day to all! I'm learning react, got to the topic of routing, and when I try to create a NavLink in the menu, I get the following error:

./node_modules/react-router-dom/modules/NavLink.js
SyntaxError: C:\Projects\react\my-app\node_modules\react-router-dom\modules\NavLink.js: Support for the experimental syntax 'jsx' isn't currently enabled (45:7):

  43 |   ) => {
  44 |     return (
> 45 |       <RouterContext.Consumer>
     |       ^
  46 |         {context => {
  47 |           invariant(context, "You should not use <NavLink> outside a <Router>");
  48 | 
Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

Tried installing @babel/plugin-transform-react-jsx. Did not help.
Here is the menu code:

import React from "react";
import style from "./Menu.module.css"
import NavLink from "react-router-dom/modules/NavLink";

function Menu() {
    return (
            <div className="island main-menu">
                <NavLink to="/profile" className={`${style.menu} ${style.menu_selected}`}>
                    <div className="menu__icon">
                      
                    </div>
                    <span className={style.menu__text}>Profile</span>
                </NavLink>
                <NavLink to="/dialogs" className={style.menu}>
                    <div className="menu__icon">
                   
                    </div>
                    <span className={style.menu__text}>Message</span>
                </NavLink>
                <a className={style.menu}>
                    <div className="menu__icon">
                       
                    </div>
                    <span className={style.menu__text}>News</span>
                </a>
                <a className={style.menu}>
                    <div className="menu__icon">
                       
                    </div>
                    <span className={style.menu__text}>Settings</span>
                </a>
            </div>
    );
}

export default Menu;

Here is App.js:

import React from 'react';
import './App.css';
import Sidebar from "./components/sidebar/Sidebar";
import Profile_page from "./components/profile_page/Main";
import Dialogs from "./components/dialogs/Dialogs"
import { BrowserRouter, Route, Link } from "react-router-dom";


function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Sidebar></Sidebar>
                <Route path="/dialogs" component={Dialogs}></Route>
                <Route path="/profile" component={Profile_page}></Route>
            </div>
        </BrowserRouter>
    );
}

export default App;

The menu itself is part of the Sidebar component:

import React from "react";
import Logo from "../logo/Logo";
import Menu from "../menu/Menu";

function Sidebar() {
    return (
        <aside>
            <Logo></Logo>
            <Menu></Menu>
        </aside>
    );
}

export default Sidebar;

Help me figure out what's wrong.
Thank you all in advance)

Answer 1

As a result, I solved the problem by replacing the import:

import NavLink from "react-router-dom/modules/NavLink";

A: Thank you all for your help. I would be grateful if someone explains in detail what is the difference between the two imports?!??
import {NavLink} from "react-router-dom";

Answer 2

The switch component is needed which wraps the routes.