You're using <LazyMotion> in strict mode. Strict mode means it will throw an error if it detects a <motion /> component being rendered anywhere within it (instead of an <m /> component).
Explanation
<m /> is a minimal version of the <motion /> component that comes without any of the animation or gesture functionality usually provided by <motion />.
This means it has a far smaller bundlesize. The desired functionality is then passed in via <LazyMotion /> either synchronously or asynchonrously. So animation code can be loaded more efficiently than other critical UI code.
But, if a <motion /> component is rendered anywhere within this component then it's likely (but not certain) that this has imported all that functionality itself, removing the bundlesize benefits of using <LazyMotion />.
Solutions
Use an m component
The obvious fix is by changing <motion /> to <m />, as instructed. This can be difficult or impossible if the <motion /> component has been imported by a third-party. You could request that the third-party provide a version of the component that uses the <m /> component instead.
Disable strict mode
Strict mode is good for safety but can be overzealous. For instance, if this <motion /> component has been rendered within a component that was itself lazily-loaded, then that is hard for <LazyMotion /> to detect but actually points to a performant loading strategy.
Ignore strict mode
By passing ignoreStrict to the <motion /> component, this error can be turned into a warning.
