What is the best way to create HOC withAuth in Next.js in TypeScript?

I have a Next.js app and I'm using next-auth package. I'm trying to create a HOC that will wrap around the actual component and will determine if it has session or not. I'm also using eslint. Here's my code:

import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';

type Props = any;

const withAuth = (Component: React.ComponentType<Props>) => {
  const Auth = (props: Props) => {
    const router = useRouter();
    const { status } = useSession({
      required: true,
      onUnauthenticated() {
        router.push('/welcome/login');
      },
    });

    if (status === 'loading') {
      return 'Loading ...';
    }

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

export default withAuth;

Eslint gives me a warning about me using type any. I tried to change those two lines to where I'm using a generic type:

const withAuth = <P extends {}>(Component: React.ComponentType<P>) => {
  const Auth = (props: P) => {

But now it gives me an error:

Error: Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `object` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.
- If you want a type meaning "empty object", you probably want `Record<string, never>` instead.
- If you really want a type meaning "any non-nullish value", you probably want `NonNullable<unknown>` instead.  @typescript-eslint/ban-types

What is the best way to write a HOC when we have to pass a component as props? And I don't know what kind of component it will be

from What is the best way to create HOC withAuth in Next.js in TypeScript?