как мне обновить поле формы автозаполнения реакции с помощью опции получения моего местоположения?

Question

У меня есть поле формы с автозаполнением мест, а также кнопка, которая автоматически заполняется текущим местоположением. Как мне заставить кнопку геолокации заполнить поле ввода?

Пожалуйста, помогите. Кнопка getMyLocation автоматически заполняется в первый раз, но как только происходит изменение ввода и нажимается кнопка getmylocation, значение больше не отображается в текстовом поле.

function GoogleMaps({
      onSelectAddress,
      myAddress,
      onMyLocation,
      myLocation,
    }) {
      const classes = useStyles();
      const [inputValue, setInputValue] = React.useState('');
      const [value, setValue] = React.useState('');
      const [options, setOptions] = React.useState([]);
      const [placeId, setPlaceId] = React.useState();
      const componentRestrictions = { country: 'usa' };
      const types = ['establishment', 'geocode'];

      const handleInputFieldChange = (event) => {
        onMyLocation(false);
        setInputValue(event.target.value);
        onSelectAddress(event.target.value);
      };

      const fetchPrediction = React.useMemo(
        () =>
          throttle((input, callback) => {
            autocompleteService.current.getPlacePredictions(input, callback);
          }, 200),
        [],
      );

      const fetchDetails = React.useMemo(
        () => async (input, callback) => {
          placesService.current.getDetails(input, callback);
        },
        [],
      );

      React.useEffect(() => {
        myLocation ? setValue(myAddress) : null;
      }, [myLocation, myAddress]);

      React.useEffect(() => {
        let active = true;

        if (!autocompleteService.current && window.google) {
          autocompleteService.current = new window.google.maps.places.AutocompleteService();
        }
        if (!autocompleteService.current) {
          return undefined;
        }

        if (inputValue === '') {
          setOptions([]);
          return undefined;
        }

        fetchPrediction(
          { input: inputValue, componentRestrictions, types },
          (results) => {
            if (active) {
              setOptions(results || []);
            }
          },
        );

        return () => {
          active = false;
        };
      }, [inputValue, fetchPrediction]);

      React.useEffect(() => {
        if (!placesService.current && window.google) {
          placesService.current = new window.google.maps.places.PlacesService(
            document.createElement('div'),
          );
        }

        if (!placesService.current) {
          return undefined;
        }

        if (!placeId) {
          return undefined;
        }

        fetchDetails(
          { placeId, fields: ['geometry', 'address_components'] },
          (result) => {
            let address;
            if (result && result.address_components) {
              address = addressComponentsToObject(result.address_components);
            }

            const addressInfo = {
              ...address,
              googlePlaceId: placeId,
              latitude: _.get(result, 'geometry.location.lat')
                ? result.geometry.location.lat()
                : null,
              longitude: _.get(result, 'geometry.location.lat')
                ? result.geometry.location.lng()
                : null,
            };
            onSelectAddress(addressInfo);
          },
        );

        return undefined;
      }, [placeId, fetchDetails]);

      return (
        <Autocomplete
          id="google-map-search"
          style={{ width: '100%' }}
          getOptionLabel={(option) =>
            typeof option === 'string' ? option : option.description
          }
          filterOptions={(x) => x}
          options={options}
          autoComplete
          includeInputInList
          freeSolo
          disableOpenOnFocus
          value={value}
          onChange={(event, value) => {
            value ? setPlaceId(value.place_id) : setPlaceId(null);
          }}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Search"
              placeholder="Search by property addresss..."
              variant="outlined"
              fullWidth
              autoFocus
              onChange={handleInputFieldChange}
            />
          )}