How to limit search results with Google Maps Autocomplete API-CodePudding

I am currently restricting the suburb lookup within Australia using

if I enter Coogee in the search, I can see multiple results coming out. But if I only want Coogee in NSW instead WA, how should I do that?

There's a mention of Place Types with

code snippet:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.749933,
      lng: -73.98633
    },
    zoom: 13,
    mapTypeControl: false,
  });
  map.fitBounds({ // bounds of NSW
      "south": -37.5052801,
      "west": 140.9992793,
      "north": -28.15702,
      "east": 159.1054441
    });
  const input = document.getElementById('inputSuburb');
  const options = {
    fields: ["address_components", "geometry", "types", "name"],
    strictBounds: true,
    bounds : { // bounds of NSW
      "south": -37.5052801,
      "west": 140.9992793,
      "north": -28.15702,
      "east": 159.1054441
    },
    componentRestrictions: {
      country: 'au'
    },
    types: ['locality', 'postal_code']
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();
    console.log(place);
  });

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '"   place.name   "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });
}

window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
        <input id="inputSuburb" type="text" placeholder="Enter a location" value="cooge"/>
    <div id="map"></div>
    <div id="infowindow-content">
      <span id="place-name" ></span><br />
      <span id="place-address"></span>
    </div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>