i am facing issue of hydration in my next.js application. while alot of trubleshooting i come to a result that , it might be because of the higher order component which is withAutch.js

the error says: Warning: Expected server HTML to contain a matching in .

Mentor dashboard

import BarChart from "@/components/mentor/chart/bar-chart/page";
import LineChart from "@/components/mentor/chart/line-chart/page";
import Image from "next/image";
import React from "react";
import "./page.scss";
import StdTable from "@/components/mentor/student-table/page";
import HowItWorksSection from "@/components/mentor/how-it-works/page";
import { useSelector } from "react-redux";

const MentorDash = () => {
  const user = useSelector((state) => state.auth.data.user);

  return (
    <main className="col-md-9 ms-sm-auto col-lg-10 p-mb p-0 mentor-profile">
      <div className="bg-screen position-relative">
        <div className="row py-4">
          <div className="col-sm-12">
            <h1 className="text-white">Welcome Back, {user.first_name} {user.last_name}.</h1>
          </div>
        </div>
        <div className="row g-3 py-3">
          <div className="col-sm-6 col-lg-3  ">
            <div className="p-3 bg-white rounded justify-content-between d-flex">
              <span>
                <p className="dashboard-p-label">Students</p>
                <h3>342</h3>
              </span>
              <Image src="/mentor-home/std.svg" height={60} width={60} />
            </div>
          </div>
          <div className="col-sm-6 col-lg-3  ">
            <div className="p-3 bg-white rounded d-flex justify-content-between">
              <span>
                <p className="dashboard-p-label">Awards</p>
                <h3>30+</h3>
              </span>
              <Image src="/mentor-home/award.svg" height={60} width={60} />
            </div>
          </div>
          <div className="col-sm-6 col-lg-3">
            <div className="p-3 bg-white rounded d-flex justify-content-between">
              <span>
                <p className="dashboard-p-label">Staff</p>
                <h3>312+</h3>
              </span>
              <Image src="/mentor-home/staff.svg" height={60} width={60} />
            </div>
          </div>
          <div className="col-sm-6 col-lg-3">
            <div className="p-3 bg-white rounded d-flex justify-content-between">
              <span>
                <p className="dashboard-p-label">Revenue</p>
                <h3>$34M</h3>
              </span>
              <Image src="/mentor-home/revenue.svg" height={60} width={60} />
            </div>
          </div>
        </div>
        <div className="row g-3 pb-3">
          <div className="col-sm-12 col-lg-6 rounded">
            <LineChart />
          </div>
          <div className="col-sm-12 col-lg-6 rounded">
            <BarChart />
          </div>
        </div>
        <div className="row g-1">
          <div className="col-sm-12">
            <StdTable />
          </div>
        </div>
        <HowItWorksSection />
      </div>
    </main>
  );
};

export default MentorDash;

mentor home code

"use client";
import React, { useState } from "react";
import "./page.scss";
import MentorDash from "@/components/mentor/dashboard/page";
import ProfileCompletion from "@/components/mentor/profile/page";
import WithAuth from "@/components/withAuth";

const MentorHome = () => {
  const [displayMentorDash, setDisplayMentorDash] = useState(true);

  const handleSwitchComponent = () => {
    setDisplayMentorDash(!displayMentorDash);
  };

  return (
    <>
      {displayMentorDash ? <MentorDash /> : <ProfileCompletion />}
      <button className="btn btn-lg btn-info" onClick={handleSwitchComponent}>
        Switch Component
      </button>
    </>
  );
};

export default WithAuth(MentorHome);

Higer order component

"use client";
import { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useRouter, usePathname } from "next/navigation";
import { logoutUser } from "@/app/Redux/slices/authSlice";

export default function WithAuth(Component) {
  return function WithAuth(props) {
    const router = useRouter();
    const pathname = usePathname().split("/");
    const token = useSelector((state) => state.auth.data.accessToken);
    const user = useSelector((state) => state.auth.data.user);
    const dispatch = useDispatch();

    const logoutTimerRef = useRef(null);

    useEffect(() => {
      if (!token) {
        router.push("/");
      }


    useEffect(() => {
      // Redirect logic based on user role and pathname
      if (user == null) {
        router.push("/");
      }
      if (user != null && user.role[0].id == 3 && pathname[1] == "mentor") {
        router.push("/student/home");
      }
      if (user != null && user.role[0].id == 2 && pathname[1] == "student") {
        router.push("/mentor/home");
      }
    }, [pathname, router, user]);

    return token ? <Component {...props} /> : null;
  };
}

i am unable to resolve this issue , can anyone please look into this