Missing "key" prop for element in iterator

import React from 'react'
import ReactDOM from 'react-dom'

import {useState} from "React"
import {Link, NavLink} from "React-router-dom"
import "./navbar.css"
import Logo from "../images/logo.png"
import "./navbar.css"
import {links} from "../data"
import {GoThreeBars} from "React-icons/go"



const Navbar = () => {
  return (
    <nav>
        <div className="container nav__container">
            <Link to="/" className="logo">
                <img src="{Logo}" alt="Nav Logo" />
            </Link>
            <ul className="nav__links">
              {
                links.map(({name, path}, index) => {
                  return (
                    <li>
                       <NavLink to={path} className={({isActive}) => isActive ? "active-nav" : ""}>{name}</NavLink>
                    </li>
                  )
                })
              }
            </ul>
            <button className="nav__toggle-btn">
              <GoThreeBars/>
            </button>
        </div>
    </nav>
  )
}

export default Navbar

I'm seeing this error in the Navbar file of my site that I started building using React.

This is another minor bug I see, but that's not the main issue. Please reply if you know the solution.

'ReactDOM' is defined but never used.

I think the mistake is in this part.

    <ul className="nav__links">
      {
        links.map(({name, path}, index) => {
          return (
            <li>
               <NavLink to={path} className={({isActive}) => isActive ? "active-nav" : ""}>{name}</NavLink>
            </li>
          )
        })
      }
    </ul>