I'm trying to add useTransition to my Next.js project, but it gives me this error:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

I'm not even worried if the code works or not at the moment, i simply do not understand why the useTransition hook is considered invalid. I'm running:

"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-spring": "9.4.5-beta.1",

here's the code:

const ProductImages = (() => {
  return ({ images }) => {
    const [currentImage, setCurrentImage] = useState(3)

    const transitions = useTransition(images[currentImage], currentImage, {
      from: { opacity: 0, transform: 'scale(1.1)' },
      enter: { opacity: 1, transform: 'scale(1)' },
      leave: { opacity: 0, transform: 'scale(0.9)' },
    })

    return (
      <Wrapper>
        {transitions.map(({ item, props, key }) => {
          return (
            <animated.MainImage key={key} style={{ ...props }}>
              <img src={`../${item}`} />
            </animated.MainImage>
          )
        })}
        <SubImageRow>
          {images.map((image, i) => {
            return (
              <SubImage active={currentImage === i} key={i} onClick={() => setCurrentImage(i)}>
                <img src={`../${image}`} alt={'image'} />
              </SubImage>
            )
          })}
        </SubImageRow>
      </Wrapper>
    )
  }
})()

Please help me out, thank you!