Prop id did not match.

[AntreasPetsas]

Hello,

I am using react-select: v5.7.0 which is the latest. My project is a next.js (latest version) non-typescript project. react and react-dom versions are 18.2.0.

I have the following component rendered in a

....
const formatGroupLabel = (data) => (
  <div style={groupStyles}>
    <span>{data.label}</span>
    <span style={groupBadgeStyles}>{data.options.length}</span>
  </div>
);

const Component = () =>{
  return (
  <Select
      defaultValue={activitiesSearchOptions[0]}
      options={activitiesSearchOptions}
      formatGroupLabel={formatGroupLabel}
      onChange={(event) => {setActivity(event.value)}}
  />)
}
...

• formatGroupLabel is copied pasted from the react-select documentation.
• activitiesSearchOptions is a constant list of objects with value-label pairs in a "constants.js" file.
• The page is rendered using getStaticProps().

Though, I am getting the following error:
Prop 'id' did not match. Server: "react-select-14-live-region" Client: "react-select-2-live-region"

I've tried setting up the id on the component but the problem didn't get fixed. What am I doing wrong?

P.S.
Not sure if this should be under Discussions or Issues

[GuiBrust]

try to add prop instanceId set as unique string and should work