React DatePicker flashes inside Controller render prop

I'm using react-datepicker inside a Controller from react-hook-form. The component works, but I'm seeing a strange issue: Every time I interact with the DatePicker (e.g., select a date), the component flashes or re-renders unexpectedly.

Here's a simplified version of the code:

<Controller
  name="startDate"
  control={control}
  render={({ field }) => (
    <DatePicker
      {...field}
      onChange={(value: Date) => {
        field.onChange(value);
        onDateChange?.(value); // custom handler
      }}
    />
  )}
/>

I suspected it might be related to the render prop recreating the handler on every render, but even after fixing that, the DatePicker still flashes or re-mounts.

versions:

"react-datepicker": "^7.6.0",
"react": "18.3.1",
"react-hook-form": "7.57.0",

Has anyone encountered this issue? Is there a known bug or incompatibility between react-datepicker and react-hook-form render props?

Answer

Upgrading to [email protected] resolved the problem.

I had to change the css imports:

from

import 'react-datepicker/dist/react-datepicker.css';

to

import 'node_modules/react-datepicker/dist/react-datepicker.css';