title: How to fix typescript Error (TS2322) (Type 'string' is not assignable to type 'Ref<InputRef> | undefined' ) ? The code is below
body: <p>I've tried to follow the source file for 'Ref', and I don't see any problem with the code, but it still shows me two issues.</p>
  <p>1 out of 2 problems is the &quot; Type 'string' is not assignable to type 'Ref | undefined'  &quot;
  2 out of 2 problems are&quot; 'autoComplete' is assigned a value but never used.  &quot;</p>
  <p>See the attached images below <a href="https://i.stack.imgur.com/jAFyx.jpg" rel="nofollow noreferrer">TS2322 error message</a></p>
  <p>The error message of 1 out of 2 problems:
  Type 'string' is not assignable to type 'Ref | undefined'.ts(2322)
  index.d.ts(133, 9): The expected type comes from property 'ref', which is declared here on type 'IntrinsicAtt</p>
  <p>See the attached image of the 2 out of 2 problems message below
  <a href="https://i.stack.imgur.com/LEIEI.jpg" rel="nofollow noreferrer">places-autocomplete error message screenshot</a></p>
  <p>The code:</p>
  <pre><code>import { Input } from &quot;antd&quot;
  import React, { useRef } from &quot;react&quot;
  
  const PlacesAutocomplete = () =&gt; {
    const autoCompleteRef = useRef(null)
  
    const autoComplete = new (window as any).google.maps.places.Autocomplete(
      autoCompleteRef.current,
      { types: [&quot;(cities)&quot;], componentRestrictions: { country: &quot;us&quot; } }
    )
    return (
      &lt;Input placeholder='Start typing or move the map' ref='autoCompleteRef' /&gt;
    )
  }
  
  export default PlacesAutocomplete
  </code></pre>
  <p>See the attached image of the index.d.ts file below
  <a href="https://i.stack.imgur.com/VMpnJ.jpg" rel="nofollow noreferrer">index.d.ts screenshot</a></p>
  <pre><code>interface Attributes {
          key?: Key | null | undefined;
      }
      interface RefAttributes&lt;T&gt; extends Attributes {
          ref?: Ref&lt;T&gt; | undefined;
      }
      interface ClassAttributes&lt;T&gt; extends Attributes {
          ref?: LegacyRef&lt;T&gt; | undefined;
      }
  
      interface ReactElement&lt;P = any, T extends string | JSXElementConstructor&lt;any&gt; = string | JSXElementConstructor&lt;any&gt;&gt; {
          type: T;
          props: P;
          key: Key | null;
      }
  
      interface ReactComponentElement&lt;
          T extends keyof JSX.IntrinsicElements | JSXElementConstructor&lt;any&gt;,
          P = Pick&lt;ComponentProps&lt;T&gt;, Exclude&lt;keyof ComponentProps&lt;T&gt;, 'key' | 'ref'&gt;&gt;
      &gt; extends ReactElement&lt;P, Exclude&lt;T, number&gt;&gt; { }
  </code></pre>
  <p>The message in the terminal:</p>
  <pre><code>    10 |   )
      11 |   return (
    &gt; 12 |     &lt;Input placeholder='Start typing or move the map' ref='autoCompleteRef' /&gt;
         |                                                       ^
      13 |   )
      14 | }
      15 |
  </code></pre>
  <p>Please help.
  Thank you very much!</p>