"findDOMNode is deprecated in StrictMode" using react-datepicker with React-Hook-Form

Question

I'm having an issue when trying to use "showMonthDropdown" or "showYearDropdown" options with react-datepicker.

Everything is working great until I click on the years or month Dropdown in the date picker, then I get this error in the console ...

Here's my code ...

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

import DatePicker from "react-datepicker";
import { Controller } from "react-hook-form";

import { MetadataObj } from "../../types/globalTypes";
import Div from "./InputDatePickerStyles";

type Iprops = {
  control: any;
  name: string;
  label: string;
  errors: MetadataObj;
  minDate?: Date;
  maxDate?: Date;
  showMonthDropdown?: boolean;
  showYearDropdown?: boolean;
};

const InputDatePicker = ({
  control,
  name,
  label,
  errors,
  minDate,
  maxDate,
  showMonthDropdown = false,
  showYearDropdown = false,
}: Iprops) => {
  return (
    <div>
      <label>{label}</label>
      {errors[name] && <span className="error">{errors[name].message}</span>}

      <Controller
        control={control}
        name={name}
        render={({ field, fieldState, formState }) => {
          return (
            <DatePicker
              className={errors[name] && "invalid"}
              placeholderText="Select date"
              onBlur={field.onBlur}
              onChange={date => field.onChange(date)}
              selected={field.value}
              dateFormat="d MMMM yyyy"
              maxDate={maxDate && maxDate}
              showMonthDropdown={showMonthDropdown}
              showYearDropdown={showYearDropdown}
            />
          );
        }}
      />
    </div>
  );
};

export default InputDatePicker;

Answer 1

React-datepicker relies on the react-onclickoutside library which currently has this issue unchecked (i.e. https://github.com/Pomax/react-onclickoutside/issues/369).

For my projects, I just let it be for now. At some point, either react-datepicker or react-onclickoutside will fix it, even more so if this deprecation warning becomes an error.

There seems to be no way to partially disable StrictMode either, although someone on https://github.com/facebook/react/issues/16362 (the thread about partially disabling StrictMode) suggests overriding console.error to filter out the messages you don't want to see, which could or could not be what you're ready to do.