Добавление хуков в меню начальной загрузки

Question

Привет, я пытаюсь изменить свое меню начальной загрузки, чтобы использовать крючки (реагировать), таким образом, я могу переключаться между меню, когда экран мобильного размера.

У меня есть следующее, но я застрял: - (

import React, { useState } from "react";
import { Link, NavLink } from "react-router-dom";

const NavigationBar = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <nav className="navbar navbar-expand-lg fixed-top always-solid">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">
          GRT
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          <span className="custom-toggler-icon">
            <i className="fa fa-bars"></i>
          </span>
        </button>
        <div
          className="collapse navbar-collapse"
          isExpanded={isExpanded}
          id="navbarNav"
        >
          <ul className="navbar-nav mx-auto">
            <li className="nav-item active">
              <NavLink className="nav-link" to="/">
                Home<span className="sr-only">(current)</span>
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
                to="/stories"
                onClick={() => setIsExpanded(!isExpanded)}
              >
                Stories
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
                to="/about"
                onClick={() => setIsExpanded(!isExpanded)}
              >
                About Us
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
                to="/contact"
                onClick={() => setIsExpanded(!isExpanded)}
              >
                Contact Us
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default NavigationBar;

Я ожидаю, что меню будет работать, если оно будет использовать jQuery в обычном режиме.

Я получу, мне нужно перейти к useEffect для управления любым щелчком за пределами меню, чтобы закрытьменю позже, но я изо всех сил пытаюсь реализовать это в настоящее время.

Я попробовал множество других решений, но в настоящее время они терпят неудачу, и ловушки кажутся наиболее удобными, и я надеюсь, что обеспечит лучший опыт кодирования