I am trying to make my /login page unprotected so I created a file and tried to wrap it in this but failed due to this error

lib_withUnprotectedRoute__WEBPACK_IMPORTED_MODULE_1__.default) is not a function

here is my code for withUnprotectedRoute.tsx

    "use client"

// lib/withUnprotectedRoute.ts
import { useRouter } from "next/navigation";
import React, { useEffect } from "react";

const withUnprotectedRoute = (WrappedComponent: React.ComponentType<any>) => {
  console.log("withUnprotectedRoute called");
  const Wrapper: React.FC<any> = (props) => {
    const router = useRouter();
    const [loading, setLoading] = React.useState(true);

    useEffect(() => {
      console.log("useEffect called");
      const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;

      if (token) {
        router.push("/dashboard");
      } else {
        setLoading(false);
      }
    }, [router]);

    if (loading) {
      return <div>Loading...</div>;
    }

    return <WrappedComponent {...props} />;
  };

  return Wrapper;
};

export default withUnprotectedRoute;

but this error occurs before calling this console
console.log(“useEffect called”);

and here is my login here where i want to wraped:

import Image from "next/image";
import Link from "next/link";

import { LoginForm } from "@/components/forms/LoginForm";
import withUnprotectedRoute from "@/lib/withUnprotectedRoute";

function Login() {
  return (
<>
<div>
  login here
</div>
</>
  );
};

export default withUnprotectedRoute(Login);