[BUG] Motion custom component throw error: Cannot convert undefined or null to object

[fukemy]

1. Read the FAQs 👇

2. Describe the bug

I have work with motion + NextUI, I want to create motion component from Button, but I got the error when run it:

render.mjs:6 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at HTMLVisualElement.renderHTML [as renderInstance] (render.mjs:6:12)
    at VisualElement.render (VisualElement.mjs:141:18)
    at triggerCallback (render-step.mjs:32:9)
    at Set.forEach (<anonymous>)
    at Object.process (render-step.mjs:73:23)
    at processBatch (batcher.mjs:49:16)

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

import { Button } from "@nextui-org/react"
import { motion } from "framer-motion"
import React from "react"

const AnimateButton = React.forwardRef((props, ref) => (
    <Button ref={ref} {...props} />
))

export const MotionButton = motion(AnimateButton)

Here is how I used:

<MotionButton size="lg" rounded
                    color="gradient" auto ghost={false}
                    // onPress={onBuyPackageClick}
                    shadow>
                    {/* {buttonLoading ? <Loading color="currentColor" size="sm" /> : "Buy"} */} BUY BUY
                </MotionButton>

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

4. Steps to reproduce

Steps to reproduce the behavior:

1. install nextui + motion
2. copy above code
3. Run project
4. See error