Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP)

I am trying to do a project in Next.13 and Typescript. I have created a component named Logo.tsx to render an Image.

"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

const Logo = () => {
  const router = useRouter();

  return (
    <Image
      alt="logo"
      height="100"
      width="100"
      className="
        hidden
        md:block  
        cursor-pointer
      "
      src="/images/logo.png"
    />
  );
};

export default Logo;

But I am getting this warning.

Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

I looked into the documentation but could not understand properly. How can remove this error?

I have tried adding the prop, priority like this,

    <Image
      priority="true"
      alt="logo"
      height="100"
      width="100"
      className="
        hidden
        md:block  
        cursor-pointer
      "
      src="/images/logo.png"
    />

But I am still getting the warning. And there is a new error in the Eslint,

Type 'string' is not assignable to type 'boolean | undefined'

>Solution :

Refer to the official documentation of next/image.

The TypeScript error you are getting should be a hint, what you are doing wrong. Type 'string' is not assignable to type 'boolean | undefined' That means, that the priority prop expects either a boolean or undefined, but you provided a string.

 <Image
      priority={true} // Change this line
      alt="logo"
      height="100"
      width="100"
      className="
        hidden
        md:block  
        cursor-pointer
      "
      src="/images/logo.png"
    />