I am using the react-timezone (which is built on react-select) and a traditional react-select dropdown. When I use either one it's fine but when I use both in one form I am getting the following error:
[DOM] Found 2 elements with non-unique id #react-select-3-input:
This id is generated in the DOM but it's not something that is specified in the jsx code. Speaking of code - here is my timezone code
<TimezoneSelect
id="timezone-select"
className="select-box"
value={timezone}
onChange={setTimezone}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
primary25: "#ecf1f5",
primary: "#0f4c81",
},
})}
/>And my other react-select component
<Select
id="select-num"
className="select-box"
options={options}
value={value}
onChange={setValue}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
primary25: "#ecf1f5",
primary: "#0f4c81",
},
})}
/>I can't imagine you can't use two react-select dropdown elements in one form but can't seem to figure out how to use both without this error. Any ideas????? I'm totally stumped!