BUG: Prop `id` did not match. Server: "rc-editable-input-17" Client: "rc-editable-input-2" (on CompactPicker)

I am getting the error below, using Next.js, with `@mui` and `@emotion` properly configured for SSR.
The functionality does not break, the error in the console is the only sign (I've seen) of a problem.

```plaintext
Warning: Prop `id` did not match. Server: "rc-editable-input-17" Client: "rc-editable-input-2"
at input
at div
at EditableInput (webpack-internal:///./node_modules/react-color/es/components/common/EditableInput.js:39:5)
at div
at CompactFields (webpack-internal:///./node_modules/react-color/es/components/compact/CompactFields.js:15:18)
at div
at div
at div
at Raised (webpack-internal:///./node_modules/react-color/es/components/common/Raised.js:17:21)
at Compact (webpack-internal:///./node_modules/react-color/es/components/compact/Compact.js:28:23)
at ColorPicker (webpack-internal:///./node_modules/react-color/es/components/common/ColorWrap.js:28:7)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Container (webpack-internal:///./node_modules/@mui/material/Container/Container.js:93:82)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:36:72)
at ImageBuilder (webpack-internal:///./components/ImageBuilder/ImageBuilder.tsx:147:27)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
at Container (webpack-internal:///./node_modules/@mui/material/Container/Container.js:93:82)
at div
at Home (webpack-internal:///./pages/index.tsx:26:70)
at InnerThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:21:70)
at ThemeProvider (webpack-internal:///./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:47:5)
at ThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:41:5)
at MyApp (webpack-internal:///./pages/_app.tsx:60:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:357:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:791:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)
```

Here are the pickers I am using at the moment:

```jsx
<>
{
bgColor.toggle(true)
bgColor.set(c.hex)
}}
/>

{
fgColor.toggle(true)
fgColor.set(c.hex)
}}
/>

```

The values come from a state hook, wrapped by a custom hook, like so:

```typescript
export function useTogglableValue(
value: T,
defaultState = false
): {
value: T
set: React.Dispatch>
enabled: boolean
toggle: React.Dispatch>
} {
const [get, set] = React.useState(value)
const [enabled, toggle] = React.useState(defaultState)
return {
value: get,
set,
enabled,
toggle,
}
}

// ...

const bgColor = useTogglableValue("#999999", false)
const fgColor = useTogglableValue("#000000", false)
```

Versions:

```plaintext
Yarn 1.22.15
TypeScript 4.5.5
Next.JS 12.1.0
```

package.json:

```json
{
"dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.4.4",
"@mui/system": "^5.4.4",
"next": "12.1.0",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dom": "17.0.2"
},
"devDependencies": {
"@types/node": "17.0.21",
"@types/react": "17.0.39",
"@types/react-color": "^3.0.6",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"typescript": "4.5.5"
}
}
```

Reproduce the CompactPicker warning with the listed Next.js and React versions, then inspect node_modules/react-color/es/components/common/EditableInput.js and components/compact/CompactFields.js, as identified in the stack trace. Determine why server and client IDs differ during SSR; done means the picker still works and the hydration warning is absent.

Written by the indexing model from the issue text.