is there a typescript example using function components and useRef?

[dcsan]

Current Behavior

Trying to create a func component player with TS and a useRef and getting compile errors since a ref is needed for calling events on the player.

Expected Behavior

no TS compiler errors

Steps to Reproduce

// using https://github.com/cookpete/react-player

// Only loads the YouTube player
import { useRef } from 'react'
import ReactPlayer from 'react-player/youtube'

export type VidPlayerProps = {
  sourceId?: string
}

export function VidPlayer(props: VidPlayerProps) {
  const ref = useRef()
  if (!props.sourceId) return

  const url = `https://www.youtube.com/watch?v=` + props.sourceId
  console.log('vidplayer', { url })
  return (
    <ReactPlayer
      ref={ref}
      className='react-player'
      url={url}
      width='100%'
      controls={false}
      onStart={() => console.log('onStart')}
    />
  )
}

this gives one of those long typescript errors

No overload matches this call.
  Overload 1 of 2, '(props: YouTubePlayerProps | Readonly<YouTubePlayerProps>): YouTubePlayer', gave the following error.
    Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<YouTubePlayer> | undefined'.
      Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<YouTubePlayer>'.
        Types of property 'current' are incompatible.
          Type 'undefined' is not assignable to type 'YouTubePlayer | null'.
  Overload 2 of 2, '(props: YouTubePlayerProps, context: any): YouTubePlayer', gave the following error.
    Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<YouTubePlayer> | undefined'.

Environment

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

Other Information

related #1762