title: useRef throws not assignable to type LegacyRef<Slider> | undefined
body: <p>I'm using react-slick-slider and what I want to achieve is to make custom arrows.<br />
  So code looks like this:</p>
  <pre><code>const FeedbackSlider = () =&gt; {
  const [isLargeScreen] = useMediaQuery(&quot;(min-width: 1050px)&quot;)
  
  const sliderRef = useRef&lt;Slider&gt;()
  
  const prev = () =&gt; {
      sliderRef.current?.slickPrev()
  }
  const next = () =&gt; {
      sliderRef.current?.slickNext()
  }
  const settings = {
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: (isLargeScreen ? 2 : 1),
      slidesToScroll: 1,
      prevArrow: (isLargeScreen &amp;&amp; &lt;PrevArrow /&gt;),
      nextArrow: (isLargeScreen &amp;&amp; &lt;NextArrow /&gt;)
  };
  return (
      &lt;Box px={['2', '4', '8', '16']} mx='auto' pt='12'&gt;
          &lt;Slider ref={sliderRef} {...settings}&gt;
             // slider cards...
          &lt;/Slider&gt;
          {!isLargeScreen &amp;&amp; (
              &lt;Flex alignItems='center' w='5xs' justifyContent='space-between' mx='auto' my='5'&gt;
                  &lt;PrevArrow onClick={prev} /&gt;
                  &lt;NextArrow onClick={next} /&gt;
              &lt;/Flex&gt;)}
      &lt;/Box &gt;)
  </code></pre>
  <p>The Slider used as type is Slider components imported from react-slick which ref I'm taking
  I'm getting an error only in VScode code works in browser okay:</p>
  <blockquote>
  <p>No overload matches this call.
  Overload 1 of 2, '(props: Settings | Readonly): Slider', gave the following error.
  Type 'MutableRefObject&lt;Slider | undefined&gt;' is not assignable to type 'LegacyRef | undefined'.
  Type 'MutableRefObject&lt;Slider | undefined&gt;' is not assignable to type 'RefObject'.
  Types of property 'current' are incompatible.
  Type 'Slider | undefined' is not assignable to type 'Slider | null'.
  Type 'undefined' is not assignable to type 'Slider | null'.
  Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error.
  Type 'MutableRefObject&lt;Slider | undefined&gt;' is not assignable to type 'LegacyRef | undefined'.</p>
  </blockquote>
  <p>EDIT:</p>
  <blockquote>
  <blockquote>
  <p>No overload matches this call.
  Overload 1 of 2, '(props: Settings | Readonly): Slider', gave the following error.
  Type '{ children: Element[]; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; prevArrow: false | Element; nextArrow: false | Element; ref: MutableRefObject&lt;...&gt;; }' is not assignable to type 'Readonly'.
  Types of property 'nextArrow' are incompatible.
  Type 'false | Element' is not assignable to type 'Element | undefined'.
  Type 'false' is not assignable to type 'Element | undefined'.
  Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error.
  Type '{ children: Element[]; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; prevArrow: false | Element; nextArrow: false | Element; ref: MutableRefObject&lt;...&gt;; }' is not assignable to type 'Readonly'.
  Types of property 'nextArrow' are incompatible.
  Type 'false | Element' is not assignable to type 'Element | undefined'.</p>
  </blockquote>
  </blockquote>