DatePicker raises hydration error on Next.js with React Strict Mode

[ryan5500]

I found SequencePrefixIdProvider provided at here, and used around DatePicker component like this.

# at pages/index.js
 import { DatePicker, SequencePrefixIdProvider } from 'smarthr-ui';

  export default function Home() {
    return (
      <SequencePrefixIdProvider>
        <DatePicker />
      </SequencePrefixIdProvider>
    )
  }

but it raises hydration error like this.

Versions

I use those libraries.

    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "smarthr-ui": "21.1.0",

How To Reproduce

• Minimal reproducible example is below.
  • https://github.com/ryan5500/smarthrui-v21-1-0-datepicker

Related Information

• React 18 introduce their useId hook.
  • https://reactjs.org/blog/2022/03/29/react-v18.html#useid
  • maybe it would be fix this problem.

[iimtii]

Hi, can I work on this?