React page with sidebar component not rendering the component when clicked on link

Question

I am building a react admin panel with a sidebar and when the link inside the sidebar is clicked it should render the component which is being clicked and the component is not rendering properly. I looked at the previous submissions by other developers and they were using react-router v5 and the current version is v6.

This is the following code I have tried and it's not working accordingly.

app.jsx

function App() {
  return (
    <>
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" index element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/adminPanel" element={<AdminPanel />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/scanNow" element={<ScanNow />} />
          <Route path="/scanHistory" element={<ScanHistory />} />
          <Route path="/users" element={<Users />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

adminPanel

export default function AdminPanel() {
  const [selectedComponent, setSelectedComponent] = useState("");

  const location = useLocation();
  // const isLoggedIn = location.pathname.includes('adminPanel');

  return (
    <>
      <div className="adminPanel">
        <div className="adminPanel__container">
          <SideBar />
          <div>
            {selectedComponent === 'dashboard' && <Dashboard />}
            {selectedComponent === 'scanNow' && <ScanNow />}
            {selectedComponent === 'scanHistory' && <ScanHistory />}
            {selectedComponent === 'users' && <Users />}
            {selectedComponent === 'profile' && <Profile />}
            {selectedComponent === 'settings' && <Settings />}
          </div>
        </div>
      </div>
    </>
  )
}

sidebar.jsx

export default function SideBar() {
  const [showMobSidebar, setShowMobSidebar] = useState(false);
  const [activeLink, setActiveLink] = useState("");

  // useEffect to show the mobile sidebar when the component mounts and event
  // listener is added and removed
  useEffect(() => {
    setShowMobSidebar(window.innerWidth < 767);

    const handleResize = () => {
      setShowMobSidebar(window.innerWidth < 767);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  // handle the click for the active link
  const handleLinkClick = (link) => {
    setActiveLink(link);
  };

  return (
    <>
      {showMobSidebar ? (
        <MobileSidebar />
      ) : (
        <div className="sidebar">
          <ul className="sidebar__lists">
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "dashboard" ? "active" : ""}`}
                to="/dashboard"
                onClick={() => handleLinkClick("dashboard")}
              >
                <MdDashboard className="react-icons" />
                Dashboard
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "scanNow" ? "active" : ""}`}
                to="/scanNow"
                onClick={() => handleLinkClick("scanNow")}
              >
                <CgPhotoscan className="react-icons" />
                Scan Now
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "scanHistory" ? "active" : ""}`}
                to="/scanHistory"
                onClick={() => handleLinkClick("scanHistory")}
              >
                <MdHistory className="react-icons" />
                Scan History
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "users" ? "active" : ""}`}
                to="/users"
                onClick={() => handleLinkClick("users")}
              >
                <HiOutlineUsers className="react-icons" />
                Users
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "profile" ? "active" : ""}`}
                to="/profile"
                onClick={() => handleLinkClick("profile")}
              >
                <CgProfile className="react-icons" />
                Profile
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "settings" ? "active" : ""}`}
                to="/settings"
                onClick={() => handleLinkClick("settings")}
              >
                <MdOutlineSettings className="react-icons" />
                Settings
              </Link>
            </li>
            <li className="sidebar__lists-item">
              <Link
                className={`sidebar__lists-link ${activeLink === "logout" ? "active" : ""}`}
                to="/login"
                onClick={() => handleLinkClick("logout")}
              >
                <MdOutlineLogout className="react-icons" />
                Logout
              </Link>
            </li>
          </ul>
        </div>
      )}
    </>
  );
}

`