How to fix typescript error Type 'string' is not assignable to type 'Ref<InputRef> | undefined'?

Question

Why did it Fail to compile??

C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx
TypeScript error in C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx(12,55):
Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.  TS2322

    10 |   )
    11 |   return (
  > 12 |     <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
       |                                                       ^
    13 |   )
    14 | }
    15 |

This error occurred during the build time and cannot be dismissed.

The complete source code:

import { Input } from "antd"
import React, { useRef } from "react"

const PlacesAutocomplete = () => {
  const autoCompleteRef = useRef(null)

  const autoComplete = new (window as any).google.maps.places.Autocomplete(
    autoCompleteRef.current,
    { types: ["(cities)"], componentRestrictions: { country: "us" } }
  )
  return (
    <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
  )
}

export default PlacesAutocomplete

The error message:

  Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.ts(2322)
  index.d.ts(133, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & InputProps & RefAttributes<InputRef>'

The source code where the string is configured in index.d.ts(133, 9):

interface RefAttributes<T> extends Attributes {
    ref?: Ref<T> | undefined;
}

Answer 1

the ref should be an object and don't a string. ref={autoCompleteRef}