Google Places (multiple)

I am wanting users to be able to input multiple locations: for example

Melbourne, Perth, Sydney.

I am currently using

    <input id="searchTextField"></input>
    <script type="text/javascript">
      function initialize() {
        var options = {
          componentRestrictions: {country: 'au'}
        };

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input, options);
      }

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

However I want to move it to Material-UI Autocomplete - while yes it works it won't allow me to select the location due to Autocomplete requires options, and without that it won't work. I am wondering what is a better way to get multiple locations working.

<Autocomplete
            id="searchTextField"
            name="country"
            options={countries}
            required
            multiple
            variant="outlined" fullWidth
            getOptionLabel={option => option.label}
          //  style={{ width: 300 }}
            onChange={(e, value) => {
              console.log(value);
              setFieldValue(
                "country",
                value !== null ? value : initialValues.country
              );
            }}
            renderInput={params => (
              <TextField
                margin="normal"
                label="Country"
                variant="outlined" 
                fullWidth
                required
                name="country"
                {...params}
              />
            )}
          />

I have also tried the following but when a user clicks it does not set to the Field.

<Field name="targetLocation" >
                    {({ field, form, meta }) => (
                    <div>
                        <input variant="outlined" id="searchTextField" fullWidth  
                            type="text" {...field} required label="Campaign Name"/>
                        {meta.touched &&
                        meta.error && <div className="error">{meta.error}</div>}
                    </div>
                    )}
                 </Field>

DEMO of issue - you'll notice only 1 input is being sent to array. https://codesandbox.io/s/youthful-hofstadter-dp4mx?file=/src/App.js