Cannot enable controls on react-player/vimeo

[ScottAgirs]

Current Behavior

Just upgraded to latest v2.3.1 and cannot seem to get Vimeo controls to display on certain video embeds. (will provide links below for the working and non-working ones).

Steps to Reproduce

1. import player from either react-player or react-player/vimeo
2. controls: true doesn't seem to make a difference

My react-player component:

<ReactPlayer
            ref={playerRef}
            height="100%"
            width="100%"
            onEnded={handleEnded}
            onReady={handleReady}
            playing={playing}
            playbackRate={playbackRate}
            url={videoURL}
            config={{
              controls: true,
            }}
          />

My Vimeo settings:

Without making any changes to config or the component, there are only a couple of videos that show the controls, they both are from the same user:

     // url="https://vimeo.com/244729509" // Broken
            // url="https://vimeo.com/367645406" // Broken
            // url="https://vimeo.com/428523994" // Broken
            // url="https://vimeo.com/428478826" // Broken
            // url="https://vimeo.com/427480079" // Broken
            // url="https://vimeo.com/396458662" // OK
            // url="https://vimeo.com/341290037" // OK

I have tried various combinations on my account for the embed settings, including the default and it doesn't seem to make a difference.

Environment

• Browser: Safari, Chrome, Brave, Vivaldi, Firefox (all latest)
• Operating system: macOS
• code sample: https://codesandbox.io/s/hungry-mendeleev-kkpuf?file=/pages/index.js

Other Information

[ScottAgirs]

Update: seems to be working fine with a class component - this appears to be an issue only with functional component and the use of useRef() haven't looked more into it for now - would be great to know if there's a known limitation and intricacy for why this is not working with functional components.

[cookpete]

controls is a top level prop, and doesn't need to be inside config.

I have no idea why things would behave differently as a functional component.

[ScottAgirs]

controls is a top level prop, and doesn't need to be inside config.

I have no idea why things would behave differently as a functional component.

Ahh, such a simple fix, lol I spent so much time yesterday, totally missed that one, haha. Thanks for this!!

If someone else runs into this - the default for controls clearly is false, as seen here, hehe.

Still it's weird that on some videos the controls were displayed even tho the controls were at false.

@CookPete react-player rocks, thanks so much for creating it!