Javascript 导航栏中显示项目的方式有问题

i am trying to render some dropdown items in a navbar, it appears only the last item of the navbar is being rendered, the logged data appears to be correct, i even hard coded the data into one of the components, the same error still persists. , .

    //Navbar component
    import React from "react";
    import { Link } from "react-router-dom";
    import Dropdown from "./Dropdown";
    import "./style/navbar.css";

    const Navbar: React.FC = () => {
    const npflDropdownItems = [
    "Home",
    "Fixtures",
    "Results",
    "Tables",
    "Transfer",
    "Stats",
    "Video",
    "Watch Live",
    "Clubs",
    "Players",
    "Awards",
      ];
      const aboutDropdownItems = ["Overview", "What We Do", "Careers", "Partners"];
      const moreDropdownItems = ["Managers", "Referee", "e-NPFL", "Contact Us"];

  console.log(npflDropdownItems, aboutDropdownItems, moreDropdownItems);

  return (
    <nav className="navbar">
      <div className="logo-container">
        <img className="logo" src="path-to-your-logo.png" alt="Logo" />
      </div>
      <div className="navbar-dropdown">
        <div className="navbar-item npfl">
          Npfl
          <Dropdown items={npflDropdownItems} />
        </div>
      </div>
      <div className="navbar-dropdown">
        <div className="navbar-item about">
          About
          <Dropdown items={aboutDropdownItems} />
        </div>
      </div>
      <div className="navbar-dropdown">
        <div className="navbar-item more">
          More
          <Dropdown items={moreDropdownItems} />
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

//Dropdown component
import React from "react";
import { Link } from "react-router-dom";

interface DropdownProps {
  items: string[];
}

const Dropdown: React.FC<DropdownProps> = ({ items }) => {
  return (
    <div className="navbar-dropdown">
      {items.map((item, index) => (
        <div key={index} className="navbar-item-dropdown">
          {item}
        </div>
      ))}
    </div>
  );
};

export default Dropdown;
`

`/* Navbar.css */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px;
  color: #fff;
}

.logo-container {
  max-width: 100px;
}

.logo {
  width: 100%;
  height: auto;
}

.navbar-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-item {

  margin-right: 10px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
}

.navbar-dropdown {
  position: relative;
  z-index: 2;
}

.navbar-item-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 10px;
  width: 150px;
  z-index: 1;
}

.navbar-dropdown:hover .navbar-item-dropdown {
  display: block;
}

.fantasy,
.more {
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar-menu {
    flex-direction: row;
    align-items: flex-start;
  }

  .navbar-item,
  .fantasy,
  .more {
    margin: 5px 0;
  }

  .navbar-dropdown .navbar-item {
    width: 100%;
  }
}
`

我希望当点击或悬停时，所有下拉项都会显示出来.

thanks in advance