Navbar's not respondin onclick

**I have tried everything possible to make the clicking fire but I seem not to get it. I just want to be able to open and close the navbar using the hamburger and close icons**


    

I know it is possibly a syntax error but I can't find it. please help

import './style.scss';
    import { Link, NavLink } from 'react-router-dom';
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    import {
      faBars,
      faClose,
      faEnvelope,
      faHome,
      faSuitcase,
      faUser,
    } from '@fortawesome/free-solid-svg-icons';
    import {
      faGithub,
      faLinkedinIn,
      faTwitter,
    } from '@fortawesome/free-brands-svg-icons';
    import { useState } from 'react';
    
    const Sidebar = () => {
      const [displayNav, setDisplayNav] = useState(false);
    
      return (
        <>
          <div className="nav-bar">
            <Link className="Logos" to="/">
              <h1 className="logo" alt="logo">
                T
              </h1>
              <h3 className="logoTitle" alt="Tiamz">
                Tiamz
              </h3>
            </Link>
    
            <nav className={displayNav ? 'mobileView' : ' '}>
              <NavLink
                exact="true"
                onClick={() => setDisplayNav(false)}
                activeclassname="active"
                to="/"
              >
                <FontAwesomeIcon icon={faHome} color="#fff" />
              </NavLink>
              <NavLink
                onClick={() => setDisplayNav(false)}
                exact="true"
                activeclassname="active"
                className="portfolio-link"
                to="/portfolio"
              >
                <FontAwesomeIcon icon={faSuitcase} color="#fff" />
              </NavLink>
              <NavLink
                onClick={() => setDisplayNav(false)}
                exact="true"
                activeclassname="active"
                className="about-link"
                to="/about"
              >
                <FontAwesomeIcon icon={faUser} color="#fff" />
              </NavLink>
              <NavLink
                onClick={() => setDisplayNav(false)}
                exact="true"
                activeclassname="active"
                className="contact-link"
                to="/contact"
              >
                <FontAwesomeIcon icon={faEnvelope} color="#fff" />
              </NavLink>
              <FontAwesomeIcon
                onClick={() => setDisplayNav(false)}
                icon={faClose}
                className="closeNav"
                size="4x"
              />
            </nav>
    
            <ul>
              <li>
                <a
                  target="-blank"
                  rel="noreferrer"
                  href="https://www.linkedin.com/in/tiamz-is/"
                >
                  <FontAwesomeIcon icon={faLinkedinIn} color="#fff" />
                </a>
              </li>
              <li>
                <a
                  target="-blank"
                  rel="noreferrer"
                  href="https://mobile.twitter.com/Tiamz_IS"
                >
                  <FontAwesomeIcon icon={faTwitter} color="#fff" />
                </a>
              </li>
              <li>
                <a
                  target="-blank"
                  rel="noreferrer"
                  href="https://github.com/Tiamz01"
                >
                  <FontAwesomeIcon icon={faGithub} color="#fff" />
                </a>
              </li>
            </ul>
    
            <FontAwesomeIcon
              onClick={() => setDisplayNav(true)}
              icon={faBars}
              className="hamburger-icon "
              size="4x"
            />
          </div>
        </>
      );
    };
    
    export default Sidebar;