Repository: ui
Issue: [bug]: Select
Labels: bug

### Describe the bug

Since the Select component requires a value, I am using it to select a country code. I loop through all the countries using map, and for each country, I have a <div> with the key={name + '' + code}. Then, I have the <Select /> with the value={code}.

However, I am encountering this issue:

Encountered two children with the same key, '+61'. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I believe the issue is caused by the fact that behind the scenes, shadcn is mapping the list and using key={value}, which results in this conflict.

```{COUNTRY_CODE.map(({ flag, code, name, abbreviation }) => (
                      <div key={`${code}-${name}`}>
                        <SelectItem value={code} key={`${code}-${name}`}>
                          <div className="flex space-x-[12px]">
                            <div className="relative h-[20px] w-[20px]">
                              <Image
                                src={flag}
                                alt={abbreviation}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <div className="flex space-x-[4px]">
                              <span className="text-black-mid text-[12px]">
                                ({code})
                              </span>
                            </div>
                          </div>
                        </SelectItem>
                      </div>
                    ))}```

### Affected component/components

Select

### How to reproduce

{COUNTRY_CODE.map(({ flag, code, name, abbreviation }) => (
                      <div key={`${code}-${name}`}>
                        <SelectItem value={code} key={`${code}-${name}`}>
                          <div className="flex space-x-[12px]">
                            <div className="relative h-[20px] w-[20px]">
                              <Image
                                src={flag}
                                alt={abbreviation}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <div className="flex space-x-[4px]">
                              <span className="text-black-mid text-[12px]">
                                ({code})
                              </span>
                            </div>
                          </div>
                        </SelectItem>
                      </div>
                    ))}

### Codesandbox/StackBlitz link

_No response_

### Logs

```bash
Encountered two children with the same key, `+61`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
```


### System Info

```bash
Encountered two children with the same key, `+61`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues