Javascript – Onclick is not working over the element in React

Using a library to make a navbar , i am clicking the logout button but it displays homepage after clicking and not the log inside the callback function passed in onClick .

import hcOffcanvasNav from "hc-offcanvas-nav";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
  DarkHomeInviteFriendsIcon,
  DarkHomeLogoutIcon,
  DarkHomeMenuIcon,
  DarkHomeNotificationsIcon,
  DarkHomeSettingsIcon,
  DarkHomeTripIcon,
  DarkHomeWalletIcon,
  DarkImgProfileImage,
  HomeInviteFriendsIcon,
  HomeLogoutIcon,
  HomeMenuIcon,
  HomeNotificationsIcon,
  HomeSettingsIcon,
  HomeTripIcon,
  HomeWalletIcon,
  ImgProfileImage,
} from "../../../assets/TaxiModeImage";
import { Link } from "react-router-dom";

const Navigation = ({ setLogoutModal }) => {
  const themeGetter = useSelector((state) => state.theme);

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  console.log("in navigation");
  useEffect(() => {
    const Nav = new hcOffcanvasNav("#main-nav", {
      customToggle: ".toggle",
      open: isMenuOpen,
      swipeGestures: false,
    });

    return () => Nav.close();
  }, [isMenuOpen]);

  const toggleMenu = () => {
    setIsMenuOpen((prev) => !prev);
  };

  const handleClick = () => {
    console.log("Logout button clicked");
  };
  return (
    <nav id="main-nav">
      <ul className="second-nav">
        <li>
          <Link className="sidebar-user d-flex align-items-center p-3 border-0 mb-0    rounded-4">
            <img
              src={themeGetter ? DarkImgProfileImage : ImgProfileImage}
              className="rounded-pill me-3 ch-50"
              alt="#"
            />
            <div>
              <h4
                className={`mb-0 ${
                  themeGetter ? "txt-white-dark" : "tm-secondary-txt-color"
                } roboto-text`}
              >
                Hello, Brayden
              </h4>
              <small className="tm-primary-txt-color roboto-text">
                Edit account
              </small>
              <br />
            </div>
          </Link>
        </li>
...
      <ul className="bottom-nav">
        <li>
          <Link
            className="txt-logout"
            onClick={() => {
              console.log("click");
            }}
          >
            {themeGetter ? (
              <DarkHomeLogoutIcon className="me-3" />
            ) : (
              <HomeLogoutIcon className="me-3" />
            )}
            <span className="txt-logout" onClick={handleClick}>
              &nbsp;Logout
            </span>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

i tried to log the ‘click’ but it didn’t happened , i want to know that is this the library or css or code problem because if the code is normal then it should be logged but it doesn’t.