dropdown list displaying problems

I have 2 problems in my code , as you see I have a navbar that contain 6 items 2 of them should display a dropdown list when clicked .

I was able to make them display a dropdown list but there is a problem .

problem 1 : when I click on on of the 2 items both drop down list shows up , but what i want is that each item shows its dropdown list , plus I want when clicking outside the list for it to close.

problem 2 : when clicking on the other 4 items there is a path that i put to them , but it seem to work with the two item that shows a dropdown list , and i dont want that i want them with no path .

this is my navitem.js :

export const navItems = [
 {
      id: 1,
      title: "mybook",
      path: "./mybook",
      cName: "navitem",
    },
    {
      id: 2,
      title: "mylab",
      path: "./mylab",
      cName: "navitem",
    },
    {
      id: 3,
      title: "marks",
      path: "./marks",
      cName: "navitem",
    },
    {
      id: 4,
      title: "trash",
      path: "./trash",
      cName: "navitem",
    },
    {
        id: 5,
        title: "mywork",
        path: "./mywork",
        cName: "navitem",
      },
      {
        id: 6,
        title: "set",
        path: "./set",
        cName: "navitem",
      },
  ];
  
  export const mybookDropdown = [
    {
      id: 1,
      title: "fav",
      path: "./fav",
      cName: "submenu-item",
    },
    {
      id: 2,
      title: "continue",
      path: "./continue",
      cName: "submenu-item",
    },
  ];
  export const mylabDropdown = [
    {
      id: 1,
      title: "dailycheck",
      path: "./dailycheck",
      cName: "submenu-item",
    },
    {
      id: 2,
      title: "recommendation",
      path: "./recommendation",
      cName: "submenu-item",
    },
    {
        id: 3,
        title: "popular",
        path: "./popular",
        cName: "submenu-item",
      },
  ]; 

and here is my Dropdown.js :

import React, { useState } from "react";
import { mybookDropdown , mylabDropdown } from "./NavItems";
import { Link } from "react-router-dom";
import "./Dropdown.css";

function Dropdown() {
  const [dropdown, setDropdown] = useState(false);

  return (
    <>
      <ul
        className={dropdown ? "mybook-submenu clicked" : "mybook-submenu"}
        onClick={() => setDropdown(!dropdown)}
      >
        {mybookDropdown.map((item) => {
          return (
            <li key={item.id}>
              <Link
                to={item.path}
                className={item.cName}
                onClick={() => setDropdown(false)}
              >
                {item.title}
              </Link>
            </li>
          );
        })}
      </ul>
      <ul
        className={dropdown ? "mylab-submenu clicked" : "mylab-submenu"}
        onClick={() => setDropdown(!dropdown)}
      >
        {mylabDropdown.map((item) => {
          return (
            <li key={item.id}>
              <Link
                to={item.path}
                className={item.cName}
                onClick={() => setDropdown(false)}
              >
                {item.title}
              </Link>
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default Dropdown;

lastly here is what I added to the navbar.jsx :

import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";

export default function navbar() {
  const [dropdown, setDropdown] = useState(false);

 return (
<ul className={[styles.navitem]}>
              {navItems.map((item) => {
                if (item.title == "mybook")
                return(
                  <li key={item.id} className={item.cName}
                    onClick={() => setDropdown(true)}
                  >
                    <Link to={item.path}>{item.title}</Link>
                  </li>
                );
                else if (item.title == "mylab")
                return(
                  <li key={item.id} className={item.cName} 
                    onClick={() => setDropdown(true)}
                  >
                    <Link to={item.path}
                    >{item.title}</Link>
                  </li>
                );
                return(
                  <li key={item.id} className={item.cName}>
                    <Link to={item.path}>{item.title}</Link>
                  </li>
                );
              }
              )}
            { dropdown && <Dropdown />}
            </ul>
 );
}