Select Component not showing value when dynamically map

[huzaifah-here]

Hi, I'm mapping value from api. But It is not appearing. When I click on create button Its saving the value which already i mapped. It just showing blank but the functionality is working

<div>{apiTeamIdGetResponse?.data?.driver1?.name}</div>
          <Select
            label="Driver 1"
            value={apiTeamIdGetResponse?.data?.driver1?.name}
            onChange={(selectedDriver) => {
              console.log(selectedDriver);
              setFormTeam({ ...formTeam, driver1Id: selectedDriver });
            }}
          >
            {apiDriverGetResponse?.data ? (
              // Render the options if apiDriverGetResponse.data is truthy
              apiDriverGetResponse?.data?.map((driver) => (
                <Option key={driver.id} value={driver.id}>
                  {driver.name}
                </Option>
              ))
            ) : (
              // Render a default option or placeholder if apiDriverGetResponse.data is falsy
              <Option key="default" value="default">
                No drivers available
              </Option>
            )}
          </Select>

[FurkanSezal]

Having exactly same issue

[dsebesta]

same as well

[TechnoFynch]

I'm having the same issue. Has anyone found a workaround or solution? Using material-tailwind/react version 2.1.4

[syihab-net]

I found a solution like this when using dynamic data. I have to rerender the select component again

{data.length > 0 && ( <Select label={label} value={value} onChange={ (val) => setData([]); fetchData(val) setValue(val) } error={!!error} disabled={disabled} > {data.map(({ id, value }, key) => ( <Option value={id} key={key} > {value} </Option> ))} </Select> )}

[YuAnWu0000]

Same here. I think the problem is Select is not mapping the Option with value but index now. I opened another issue for this: https://github.com/creativetimofficial/material-tailwind/issues/675