Why doesn't work the React Link and NavLink?

I have the main.js and Character.js. In the Character.js I want the to use NavLink element, but I got errors when I use it. When I change the NavLink to div, then it renders on the page. Can you tell me what is the problem? I'm struggling with that for a while. Thanks!

import { Routes, Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Episodes from '../Episodes/Episodes';
import Characters from '../Characters/Characters';
import Locations from '../Locations/Locations';
import Home from '../Home/Home';

export default function Main() {
  const [characters, setCharacters] = useState([]);
  const [locations, setLocations] = useState([]);
  const [episodes, setEpisodes] = useState([]);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/character');
      const data = await resp.json();
      setCharacters(data.results);
    })();
  }, []);

  return (
    <Routes>
      <Route
        path='/episodes'
        element={<Episodes episodes={episodes} />}
      ></Route>
      <Route
        path='/characters'
        element={<Characters list={characters} />}
      ></Route>
      <Route
        path='/locations'
        element={<Locations locations={locations} />}
      ></Route>
      <Route path='/' element={<Home />} />
    </Routes>
  );
}

import './characters.css';
import Character from '../Character/Character';
import { Link, NavLink, Route, Routes } from 'react-router-dom';

export default function Characters({ list }) {
  return (
    <>
      <div className='list'>
        <h2>List of characters</h2>
        {list.length === 0 && <p>No Character</p>}
        {list.map((item, idx) => (
          <div key={item.id}>
            <NavLink>{item.name}</NavLink>
          </div>
        ))}
      </div>
    </>
  );
}