Estoy tratando de agregar useTransition a mi proyecto Next.js, pero me da este error:

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

Ni siquiera me preocupa si el código funciona o no en este momento, simplemente no entiendo por qué el useTransition se considera inválido. Estoy corriendo:

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

aquí está el código:

 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> ) } })()

Por favor, ayúdame, ¡gracias!