I have a component that checks if user is authenticated. If not, it redirects him to home page, otherwise shows the page. It's defined like so:

"use client";

import { useRouter } from "next/navigation";
import useAuth from "@/hooks/useAuth";
import { FC } from "react";

function AuthRequired<T extends object>(Component: FC<T>) {
  return function AuthComponent(props: T) {
    const { user } = useAuth()
    const router = useRouter();

    if (!user) {
      console.log("User not logged in. Redirecting")
      router.push("/");
      return null;
    }

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


export default AuthRequired;

The component below is a page that is protected and should not be displayed to not authenticated users. When I use my auth component on client components it works fine, but in case of server component like this it errors out

import AuthRequired from "@/components/AuthRequired"

function page() {
  return (
    <div>store</div>
  )
}

export default AuthRequired(page)

Here's the error itself: