title: @react-google-maps/api, AutoComplete bad behaviour with ocChange input reactjs
body: <p>I have an Input which is using AutoComplete component from @react-google-maps/api.</p>
  <p>Issue is - As i start typing location the autocomplete bar gets thicker black border every time i type a word and the reason for that is because i'm using Event listener to it every time someone type on input so every-time it make another autocomplete bar on top of other.
  The reason why i'm using Event listener is onChange not set the value of the word(location) from the autocomplete bar.</p>
  <p><strong>Search.js(initAutocomplete())</strong></p>
  <pre><code>import {  Autocomplete} from &quot;@react-google-maps/api&quot;;
  import React, { useEffect, useRef, useCallback, useState } from 'react'
  import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete'
  import &quot;./Search.css&quot;
  import CircularProgress from '@mui/material/CircularProgress';
  
  
  
  function Search({ SearchRef, changeLoadingSpinnerCircle, LoadingSpinnerCircle, setNearbyPlaces, panTo, changeSpinner, changeMarker, setLoadingSpinnerState, changeNearbyPlacesType, valueInput, getValue, changeSearchInput, searchInput, nearbyPlacesOnLoad, changeNearbyMarker, nearbyMarker }) {
  
      const [modifiedNearby, setModifiedNearby] = useState([])
  
  
      const { ready, value, suggestions: { status, data }, setValue, clearSuggestions } = usePlacesAutocomplete({
          requestOptions: {
              location: { lat: () =&gt; 44, lng: () =&gt; -80 },
              radius: 50 * 1000,
          }
      })
  
  
      useEffect(() =&gt; {
          changeSpinner(false)
          setValue(&quot;&quot;)
          changeNearbyPlacesType(&quot;&quot;)
          document.getElementById(&quot;pac-input&quot;).value = &quot;&quot;
          changeSearchInput(&quot;&quot;)
      }, [valueInput])
  
      useEffect(() =&gt; {
          const newArray = nearbyPlacesOnLoad.splice(0, 2)
          setModifiedNearby(newArray)
          changeLoadingSpinnerCircle(false)
      }, [nearbyPlacesOnLoad])
  
  
  
  
      function initAutocomplete() {
  
          if (!searchInput) {
              return;
          }
  
          if (searchInput == &quot;restaurants&quot; || searchInput == &quot;Restaurants&quot;) {
              changeNearbyPlacesType(searchInput)
              getValue(searchInput)
      
              return;
  
          }
          else if (searchInput == &quot;gyms&quot; || searchInput == &quot;Gyms&quot;) {
              changeNearbyPlacesType(searchInput)
              getValue(searchInput)
          }
          else if (searchInput == &quot;university&quot; || searchInput == &quot;University&quot;) {
              changeNearbyPlacesType(searchInput)
              getValue(searchInput)
          }
          else {
  
              let input = document.getElementById(&quot;pac-input&quot;);
              let searchBox = new window.google.maps.places.SearchBox(input);
              searchBox.addListener(&quot;places_changed&quot;, function () {
  
                  gettingGeoLocation(document.getElementById(&quot;pac-input&quot;).value)
                  changeSearchInput(document.getElementById(&quot;pac-input&quot;).value);
              });
          }
      }
  
  
  
  
  
      useEffect(() =&gt; {
          const newArray = nearbyPlacesOnLoad.splice(0, 2)
          setModifiedNearby(newArray)
          changeLoadingSpinnerCircle(false)
      }, [nearbyPlacesOnLoad])
  
  
  
     
  
      console.log(searchInput, &quot;searchInput&quot;)
  
      const gettingGeoLocation = async (value) =&gt; {
  
  
          try {
              const results = await getGeocode({ &quot;address&quot;: value });
              // console.log(results, 'results')
              const { lat, lng } = await getLatLng(results[0]);
              // console.log(lat, lng)
              panTo({ lat, lng })
              changeMarker(lat, lng)
  
          }
          catch (err) {
  
              console.log(err, &quot;err in combox converting address to latlong&quot;)
          }
  
      }
  
      const handleClickNearby = (index) =&gt; {
          changeNearbyMarker(modifiedNearby[index])
          const object = {
              lat: modifiedNearby[index].lat,
              lng: modifiedNearby[index].lng
          }
          panTo(object)
      }
  
      return (&lt;&gt;
          &lt;div className='search'&gt;
              &lt;Autocomplete
              &gt;
                  &lt;input type=&quot;text&quot; id=&quot;pac-input&quot; placeholder=&quot;Search address&quot;
                      ref={SearchRef}
                      value={searchInput}
                      onChange={(e) =&gt; {
                          initAutocomplete()
  
                          changeSearchInput(e.target.value)
                      }}
                  /&gt;
              &lt;/Autocomplete&gt;
              &lt;div className='nearby'&gt;
                  &lt;p&gt;Near by&lt;/p&gt;
  
                  {LoadingSpinnerCircle ? &lt;div className='circular__loading'&gt;&lt;CircularProgress
                      thickness={1}
                      size={30}
  
                      style={{ color: &quot;black&quot; }} /&gt;&lt;/div&gt; : modifiedNearby.map((place, index) =&gt; {
                          return &lt;div className='nearby__card' key={index}
                              onClick={() =&gt; {
                                  handleClickNearby(index)
                                  setNearbyPlaces([])
                              }}
                          &gt;
                              &lt;p&gt;Name&lt;/p&gt;
                              &lt;p className='name'&gt;{place?.name}&lt;/p&gt;
                              &lt;p&gt;address&lt;/p&gt;
                              &lt;p className='address'&gt;{place?.address}&lt;/p&gt;
                              &lt;p&gt;rating&lt;/p&gt;
                              &lt;p&gt;{place?.rating}&lt;/p&gt;
                              &lt;p&gt;Place&lt;/p&gt;
                              &lt;p&gt;{place?.types[0]}&lt;/p&gt;
                          &lt;/div&gt;
                      })}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/&gt;)
  }
  
  export default React.memo(Search)
  </code></pre>
  <p><strong>Image after two words types</strong></p>
  <p><a href="https://i.stack.imgur.com/3q7cm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3q7cm.png" alt="Only two words types" /></a></p>
  <p><strong>Image after 10 words typed</strong>
  <a href="https://i.stack.imgur.com/e6plv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6plv.png" alt="10 words typed" /></a></p>