react-select: 5.8.0 - Selected option only appears in input after focus is lost

[FullerWeb]

I am currently developing a react (18) NextJS (14.2.5) application using Google Maps AutocompleteService. What I am experiencing is the selected value is not populating the input value unless the focus is lost on the element. I have verified that state is being updated.

const customStyles = {
  dropdownIndicator: (provided) => ({
    ...provided,
    display: 'none',
  }),
  indicatorSeparator: (provided) => ({
    ...provided,
    display: 'none',
  }),
  container: (provided) => ({
    ...provided,
    width: '100%',
    maxWidth: '600px',
    margin: '0 auto',
  }),
  input: (provided) => ({
    ...provided,
    width: '100%',
  }),
  singleValue: (provided) => ({
    ...provided,
    color: 'black', // Set the text color for selected value
  }),
  option: (provided) => ({
    ...provided,
    color: 'black', // Set the text color for options
  }),
  menu: (provided) => ({
    ...provided,
    width: '100%', // Ensure the menu width is responsive
  }),
  control: (provided, state) => ({
    ...provided,
    borderColor: state.isFocused ? 'blue' : 'gray', // Change border color on focus
    boxShadow: state.isFocused ? '0 0 0 1px blue' : 'none', // Add shadow on focus
  }),
};

      <Select
        inputValue={query}
        onInputChange={(newValue) => setQuery(newValue)}
        onChange={(selected) => {
          setQuery(selected ? selected.label : '');
          setSelectedOption(selected);
        }}
        options={options}
        placeholder="Search places..."
        className=""
        classNamePrefix="select"
        styles={customStyles}
        value={selectedOption}
        isClearable
      />