TextAnimate : motion.create triggers react-hooks/static-components ESLint error

[MrCyberNaut]

Describe the bug

I am using the TextAnimate component and encountering an ESLint error because MotionComponent is being created inside the render function. While useMemo is used to stabilize the reference, strict linting rules (react-hooks/static-components or react/no-unstable-nested-components) flag this as an error because creating components during render can lead to state resets and performance issues.

Affected component/components

TextAnimate

How to reproduce

Using the text Animate component
using nextjs + tailwindcss v3 (ported from v4)

Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/6xtggr

Logs

Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

D:\RAI work\RAI_website\frontend\components\ui\text-animate.tsx:266:6
  264 |
  265 |   return (
> 266 |     <MotionComponent
      |      ^^^^^^^^^^^^^^^ This component is created during render
  267 |       variants={finalVariants.container}
  268 |       initial="hidden"
  269 |       whileInView={startOnView ? "show" : undefined}

D:\RAI work\RAI_website\frontend\components\ui\text-animate.tsx:228:12
  226 |       return (motion as any)[Component]
  227 |     }
> 228 |     return motion.create(Component)
      |            ^^^^^^^^^^^^^^^^^^^^^^^^ The component is created during render here
  229 |   }, [Component])
  230 |
  231 |   const finalVariants = useMemo(() => {

System Info

Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.

D:\RAI work\RAI_website\frontend\components\ui\text-animate.tsx:266:6
  264 |
  265 |   return (
> 266 |     <MotionComponent
      |      ^^^^^^^^^^^^^^^ This component is created during render
  267 |       variants={finalVariants.container}
  268 |       initial="hidden"
  269 |       whileInView={startOnView ? "show" : undefined}

D:\RAI work\RAI_website\frontend\components\ui\text-animate.tsx:228:12
  226 |       return (motion as any)[Component]
  227 |     }
> 228 |     return motion.create(Component)
      |            ^^^^^^^^^^^^^^^^^^^^^^^^ The component is created during render here
  229 |   }, [Component])
  230 |
  231 |   const finalVariants = useMemo(() => {

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues