Error in console when using wrapper

[rhythmbhiwani]

Be sure to search for your issue before opening a new one.

Current Behavior

I'm using next js 12.2.0 with tailwind css. This is the code

<ReactPlayer
                wrapper={({ children }) => (
                  <div className="aspect-h-9 aspect-w-16 col-span-12 overflow-hidden isolate rounded-xl md:col-span-6">
                    {children}
                  </div>
                )}
                width="100%"
                height="100%"
                controls={true}
                url={bannerYouTubePlaylist.link}
/>

This is the error I get in console

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ReactPlayer`.
    at wrapper (webpack-internal:///./pages/youtube.tsx:137:66)

Expected Behavior

I'm not planning to use any refs, so how can this error be removed and what it meant.

Environment

• URL attempting to play:
• Browser: Chrome
• Operating system: Windows
• jsFiddle example: https://jsfiddle.net/sv5x3ug1

Other Information

[cookpete]

Published in 2.11.0. Sorry for the delay.