[BUG] Warning: Prop `id` did not match. Server:

[Kolby-Udacity]

[BUG] Warning: Prop `id` did not match. Server:

[csandman]

This is more of an issue with how the underlying react select works I believe. From what I can tell, adding an instanceId to your select component means it will generate an id for the underlying input element based on that. It looks like it's doing something like this:

`react-select-${instanceId}-input`

Which is then getting overridden by the id set on the form control after first render. This is fixed easily enough by manually adding the inputId prop to your select, matching it to the id you have on your form control.

<FormControl id="chakra-react-select-demo">
  <FormLabel>chakra-react-select demo</FormLabel>
  <Select
    inputId="chakra-react-select-demo"
    instanceId="chakra-react-select-1"
  />
</FormControl>

The main purpose of the id prop on the FormControl element is that it's a convenient way to set both the id prop on an input, and a for prop (htmlFor technically) on a FormLabel. So setting it manually on the input will have no negative effect, as long as both values are the same.

Here's a functional CodeSandbox example: https://codesandbox.io/s/z01hvy?file=/pages/index.tsx