[BUG] - DateRangePicker Hydration error

[z1glr]

HeroUI Version

2.6.14

Describe the bug

Using a DateRangePicker element in an otherwise empty and fresh next.js project causes a hydration error:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

...
 <ClientPageRoot Component={function App} searchParams={{}} params={{}}>
    <App params={Promise} searchParams={Promise}>
      <div className="">
        <h1>
          <DatePicker2 isRequired={true} label="Event date" name="date" variant="bordered" hideTimeZone={true} ...>
            <DateInput2 as={undefined} label="Event date" ref={{current:null}} inputRef={undefined} ...>
              <HeroUI.DateInputGroup as={undefined} label="Event date" description={undefined} ...>
                <div data-slot="base" data-required="true" data-disabled={undefined} data-readonly={undefined} ...>
                  <div onKeyDown={function} onClick={function onClick} onPointerDown={function} onMouseDown={function} ...>
                    <span>
                      <div ref={{current:null}} data-slot="inner-wrapper" className="flex items...">
                        <HeroUI.DateInputField classNames={{}} inputProps={{type:"text", ...}} slots={{base:function, ...}} ...>
                          <div data-slot="input-field" data-invalid={undefined} id="react-aria..." data-open={undefined} ...>
                            <DateInputSegment>
                              <DateInputSegment>
                                <DateInputSegment>
                                  <DateInputSegment>
                                    <DateInputSegment>
                                      <DateInputSegment>
                                        <DateInputSegment>
                                          <DateInputSegment>
                                            <DateInputSegment>
                                              <DateInputSegment classNames={{}} segment={{type:"literal", ...}} slots={{base:function, ...}} ...>
                                                <div
                                                  aria-hidden={true}
                                                    ref={{current:null}}
                                                      className={"group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content ..."}
                                                        data-editable={undefined}
                                                          data-invalid={undefined}
                                                            data-placeholder={undefined}
                                                              data-slot="segment"
                                                                data-type="literal"
                                                                  style={{}}
                                                                    >
                                                                      ...
                                                                        ...
                                                                          ...
                                                                            ...
                                                                              ...
                                                                                ...
+                                                                      {" "}
-                                                                      {" "}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a next.js app with npx create-next-app@latest
2. manually install heroui: npm install @heroui/react framer-motion and add it to the tailwind config
3. Add the herouiprovider and a daterangepicker
4. start the dev server

Expected behavior

Just a standard DateRangePicker as in the docs

Screenshots or Videos

No response

Operating System Version

linux

Browser

Firefox

[linear]

ENG-1979 [BUG] - DateRangePicker Hydration error

[wingkwong]

please provide a sandbox instead.