Help Needed: Material Tailwind Select Component Requires Selecting Option Twice to Display Correct Value

[Halazv2]

I'm facing an issue with a Select component in my react project. When I fetch options from an API and display them in the select component, the selected value only displays correctly if I select the option twice, also the initially selected value fetched from the backend does not show up.

Code:

       <Select
        variant="standard"
        label="Current Living Address"
        name="current_address"
        value={values.current_address}
        onChange={(val) => 
            handleChange({
              target: {
                name: "current_address",
                value: val
              }
            })
          }
        onBlur={handleBlur}
        error={Boolean(errors.current_address && touched.current_address)}
      >
        {addresses.length > 0 && (
          addresses.map((address) => (
            <Option key={address.id} value={address.id} className="capitalize">
              {address.number} - {address.street}
            </Option>
          ))
        )}
      </Select>
      {errors.current_address && touched.current_address && (
        <ErrorText error={errors.current_address} />
      )}

[Nishant-Pathak]

+1 facing the same issue.