I’m following a tutorial on youtube for creating a Navbar since I have no experience with Rect and JavaScript.I’m having a problem displaying a dropdown when hovering over a specific list item in my navbar (in the yt tutorial it works just fine) and I can’t figure out how to fix it.

import React, { useState } from 'react';
import { Button } from './Button';
import { Link } from 'react-router-dom';
import Dropdown from './Dropdown';
import './styles/nav-bar.css';

function 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) {
      console.log("Testing onMouseEnter - Hovering over Tournaments list item") // test = OK
      setDropdown(true);
    }
  }
  const onMouseLeave = () => {
    setDropdown(false);
  };
    
  return(
    <>
      <nav className='navbar'>
        <Link to='/' className='navbar-logo'>
          <h2>KICKOFF</h2>
        </Link>
      
        <div className='menu-icon' onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'}></i>
        </div>

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className="nav-item">
            <Link to='/' className='nav-links' onClick={closeMobileMenu}>
              Home
            </Link>
          </li>
          <li className="nav-item">
            <Link to='/players' className='nav-links' onClick={closeMobileMenu}>
              Players
            </Link>
          </li>
          <li className="nav-item" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
            <Link className='nav-links' onClick={closeMobileMenu}>
              Tournament <i className='fas fa-caret-down' />
            </Link>
            {dropdown && <Dropdown />}
          </li>
          <li className="nav-item">
            <Link className='nav-links' onClick={closeMobileMenu}>
              Contact Us
            </Link>
          </li>
        </ul>
        <Button />
      </nav>
    </>
  );
}
export default NavBar;

Looks like the logic behind onMouseEnter function is to change dropdown to true so that this part of the code {dropdown && <Dropdown />} displays, but nothing happens.
Function onMouseEnter is working since I can see the message in ma console, but looks like the value is not changing right?
If it was changed it would display the Dropdown component.

This is the Dropdown component

import React, { useState } from 'react';
import { MenuItems } from './MenuItems';
import { Link } from 'react-router-dom';
import './styles/dropdown.css';

function Dropdown() {

  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);

  return(
    <>
      <ul onClick={handleClick}
        className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
          {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;

dropdown.css

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  list-style: none;
  text-align: start;
}
.dropdown-menu li {
  background: #292828;
  cursor: pointer;
}
.dropdown-menu li:hover {
  background: #424242;
}
.dropdown-menu.clicked {
  display: none;
}
.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 16px;
}

MenuItems component

export const MenuItems = [
  {
    title: 'Home',
    path: '/',
    cName: 'dropdown-link'
  },
  {
    title: 'Players',
    path: '/players',
    cName: 'dropdown-link'
  },
  {
    title: 'Tournamets',
    path: '/tournaments',
    cName: 'dropdown-link'
  }
];