I am not setting fetchPriority (or fetchpriority), but I am receiving this error:

Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I have a Headless WordPress setup in which WP provides the data, and Nextjs renders the data that is sent through GraphQL queries to WP. On the page that is throwing this error, I have a list of posts (<ul>) that will all have a "Featured Image" - though at the moment, only one <li> has an image. The WP image data is sent via props to the FeaturedImage component which then loads the Nextjs Image.

List Item has this:

      {image && (
        <FeaturedImage image={image} className={cx("image")} priority />
      )}

This is FeaturedImage component:

export default function FeaturedImage({
  image,
  width,
  height,
  className,
  priority,
  layout,
  ...props
}) {
  const { sourceUrl, caption } = image;
  const { altText } = image || "alt text unavailable";

  width = width ? width : image?.mediaDetails?.width;
  height = height ? height : image?.mediaDetails?.height;
  layout = layout ?? "responsive";

  return sourceUrl && width && height ? (
    <figure className={className}>
      <Image
        src={sourceUrl}
        alt={altText}
        layout={layout}
        width={width}
        height={height}
        priority={priority}
        {...props}
      />
      {caption && <figcaption>{removeHtmlTags(caption)}</figcaption>}
    </figure>
  ) : null;
}

I understand that priority={true} would prevent lazy loading and prioritize that image. I know it is supposed to be on an "above the fold" image at the top. What is happening here?