CustomDatePickerDI.jsx

import React from "react";
import PropTypes from "prop-types";

export const CustomDatePicker = ({
showIcon, placeholderText, endDate, minDate, maxDate, dateFormat, selected, onChange, monthDropdown, yearDropdown
}) => {
  const [dateLoaded, setDateLoaded] = useState(false);
  
  const importDynamic = async () => {
    import ("react-datepicker/dist/react-datepicker.css");
    import("./_custom-date-picker.scss");
    const datePicker = await import("react-datepicker");
    DatePicker = datePicker.default;
    setDateLoaded(true);
  };

  useEffect(() => {
    retryPromise(importDynamic, 2000);
  }, []);

  return (
    <div
      className={showIcon ? "custom-date-picker custom-date-picker--show-icon" : "custom-date-picker"}
    >
    {
      dateLoaded ?
      <DatePicker
        showMonthDropdown={monthDropdown}
        showYearDropdown={yearDropdown}
        placeholderText={placeholderText}
        endDate={endDate}
        dateFormat={dateFormat}
        selected={selected}
        minDate={minDate}
        maxDate={maxDate}
        onChange={onChange}
      />
      : <p style={{ fontSize: "9px" }}>loading...</p>
    }
    </div>
  );
};