custom dropdown in react - reactjs

Question

I am trying to implement a custom dropdown menu in react, but I am facing some weird issues.
I can't understand why the items in the Services menu don't show up onMouseEnter.
With debugger, the function onMouseEnter gets called, but not able to see list of items
Thanks in advance.
import Dropdown from '../Dropdown'
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
const [click, setClick] = useState(false)
const [dropdown, setDropdown] = useState(false)
const handleClick = () => setClick(!click)
const closeMobileMenu = () => setClick(false)
const onMouseEnter = () => {
if (window.innerWidth < 960) {
setDropdown(false)
} else {
setDropdown(true)
}
}
const onMouseLeave = () => {
if (window.innerWidth < 960) {
setDropdown(false)
} else {
setDropdown(false)
}
}
return (
<>
<nav className="nb">
LOGO
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'}/>
</div>
<ul>
<li
className='nav-item'
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<Link
to='/services'
className='nav-links'
onClick={closeMobileMenu}
>
Services <span className='fas fa-caret-down'></span>
</Link>
{dropdown && <Dropdown />}//here is the problem. I can't see items onMouseEnter
</li>
</ul>
</nav>
</>
)
}
export default Navbar
Here is the Dropdown.js class
import "./Dropdown.css";
import React, { useState } from "react";
import { Link } from "react-router-dom";
const MenuItems = [
{
title: 'Marketing',
path: '/marketing',
cName: 'dropdown-links'
},
]
const Dropdown = () => {
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
return (
<>
<ul
onClick={handleClick}
className={click ? "dropdown-menu clicked" : "dropdown-menu"}
>
{MenuItems && MenuItems.map((item, index) => {
return (
<li key={index}>
<Link
className={item.cName}
to={item.path}
onClick={() => setClick(false)}
>
{item.title}
</Link>
</li>
);
})}
</ul>
</>
);
};
export default Dropdown;
you can use these links in index.html so that we have the same icon
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=PT+Sans:wght#700&display=swap"
rel="stylesheet"
/>