How to integrate react-google-places-autocomplete with react-hook-from?

Question

I wanted to have a input for location in my form like below

I am using a ready made component for this https://www.npmjs.com/package/react-google-places-autocomplete

import React from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const GooglePlacesAutocompleteComponent = () => (
  <div>
    <GooglePlacesAutocomplete
      apiKey="xxxxxxxxxxxxxxx"
    />
  </div>
);

export default Component;

What I generally do the following with react hook form for with a material ui Textfield is:

const validationSchema = Yup.object().shape({
  location: Yup.string().required("Location is required"),
});

const {
  control,
  handleSubmit,
  formState: { errors },
  reset,
  setError,
} = useForm({
  resolver: yupResolver(validationSchema),
});

and materialui textfield

<Controller
  name="location"
  control={control}
  render={({ field: { ref, ...field } }) => (
    <TextField
      {...field}
      inputRef={ref}
      fullWidth
      label="location"
      margin="dense"
      error={errors.location ? true : false}
    />
  )}
/>
<Typography variant="inherit" color="textSecondary">
  {errors.name?.message}
</Typography>

So Here instead of TextField I have to use GooglePlacesAutocompleteComponent

I want user to know its required.

I think something like below should be possible, but I am not getting what props to pass:

<Controller
  name="location"
  control={control}
  render={({ field: { ref, ...field } }) => (
    <GooglePlacesAutocompleteComponent
      <--------------------------->
      But for this component how can i pass the below things
      {...field}
      inputRef={ref}
      fullWidth
      label="location"
      margin="dense"
      error={errors.location ? true : false}
      <--------------------------->
    />
  )}
/>
<Typography variant="inherit" color="textSecondary">
  {errors.name?.message}
</Typography>

Answer 1

GooglePlacesAutocomplete uses react-select internally. In RHF docs, it shows you how to integrate with the Select component from react-select:

<Controller
  name="iceCreamType"
  control={control}
  render={({ field }) => <Select 
    {...field} 
    options={[
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ]} 
  />}
/>

GooglePlacesAutocomplete exposes a SelectProps prop to let you override the Select props, so this is how you use it with RHF:

const GooglePlacesAutocompleteComponent = ({ error, ...field }) => {
  return (
    <div>
      <GooglePlacesAutocomplete
        apiKey="xxxxxxxxxxxxxxx"
        selectProps={{ ...field, isClearable: true }}
      />
      {error && <div style={{ color: "red" }}>{error.message}</div>}
    </div>
  );
};

And in your form:

<Controller
  name="location"
  rules={{
    required: "This is a required field"
  }}
  control={control}
  render={({ field, fieldState }) => (
    <GooglePlacesAutocompleteComponent
      {...field}
      error={fieldState.error}
    />
  )}
/>