Hi, I'm following the guide [here](https://nextjs.org/docs/app/api-reference/components/image#art-direction) to build an image component that lets me set multiple sources for my images to handle some responsive layout stuff but running into an issue.

Basically, I'm getting the following error, and I can't figure out what's triggering it.

⨯ TypeError: (0 , next_image__WEBPACK_IMPORTED_MODULE_2__.getImageProps) is not a function
ex_web
at eval (./src/components/ExImage/index.jsx:24:96)
     at Array.map (<anonymous>)
     at ExImage (./src/components/ExImage/index.jsx:21:36)
     at stringify (<anonymous>)

my code:

import NextImage, { getImageProps } from 'next/image';

...

// Map through each source config to generate the necessary <source> elements
  const sourceElements = sources.map((source, index) => {
    const { media, width, height, quality, src } = source;

    const {
      props: { srcSet },
    } = getImageProps({
      alt,
      sizes,
      width,
      height,
      quality,
      src, // Source image
    });

    return <source key={index} media={media} srcSet={srcSet} />;
  });