Chakra 1.0.0-rc.5 - Framer-Motion - Warning: React does not recognize the `whileHover` prop on a DOM element.

Bug report

Describe the bug

Using the Documentation Guide in order to use Chakra and Framer Motion gives console warnings (however, the animations works as expected)

Warning: React does not recognize the whileHover prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase whilehover instead. If you accidentally passed it from a parent component, remove it from the DOM element. in div (created by Context.Consumer) in Box (created by ForwardRef(MotionComponent)) in ForwardRef(MotionComponent) (at App.js:11) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

Warning: React does not recognize the dragConstraints prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dragconstraints instead. If you accidentally passed it from a parent component, remove it from the DOM element. in div (created by Context.Consumer) in Box (created by ForwardRef(MotionComponent)) in ForwardRef(MotionComponent) (at App.js:11) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

To reproduce

Use the Chakra documentation Framer-motion guide, that minimal sample already shows the error, below a sandbox

Minimal reproduction

https://codesandbox.io/s/chakra-framer-motion-error-whq5x?file=/src/App.js

System information

• Browser (if applies): [e.g. Chrome, Safari]
• Version of @chakra-ui/core: [e.g. 1.0.0-rc.5]

Additional context

[TimKolberger]

See #2538

[smontlouis]

@oahmaro Did you fix the issue ? It looks like there are two solutions with their own drawback:

• const MotionBox = motion.custom(Box); with errors in the console
• const MotionBox = chakra(motion.div); with transition not working.