State Management conflict with @react-google-maps/api

Question

I'm using Autocomplete from @react-google-maps/api and I'm running into state management conflicts with React. I'm wondering what I'm doing wrong of if it's a bug on the library itself.

My code:

const Component = () => {
  ...
    <LoadScript
      libraries={LIBRARIES}
      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_PLACES_API_KEY as string}
      preventGoogleFontsLoading
    >
      <Autocomplete
        className="w-full"
        onLoad={(instance) => setAutocomplete(instance)}
        onPlaceChanged={onPlaceChanged}
        types={["address"]}
      >
        <input
          className="w-full bg-transparent ml-1"
          type="text"
          placeholder="2715 Ash Dr. San Jose, South..."
        />
      </Autocomplete>
    </LoadScript>
  ...
}

The autocomplete works fine. But since it also tries to manage the input I'm getting the following error:

client.js?4d30:1 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at div
    at div
    ...

Any thoughts?

State Management conflict with @react-google-maps/api

0 Answers0