How to pass props to DatePicker in NextJS functional Component

In nextJS project, I have a component that works with DatePicker. I need to pass showMonthYearDropdown or showMonthDropdown showYearDropdown as props to that copmonent. This is DatePickerComponent component

 const DatePickerComponent: React.FC<{ name: string; text?: (text: string) => string }> = ({
  name,
  text,
  ...props
}) =>
  const [startDate, setStartDate] = useState(new Date());
  return (
    <>
      <DatePicker
        dateFormat="dd/mm/yyyy"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        {...props}
      />
    </>
  );
};

And this is how I use this component with props

<DatePickerComponent name='datepicker' showMonthDropdown showYearDropdown />

or

<DatePickerComponent name='datepicker' showMonthYearDropdown />

But I get this error: Property 'showMonthDropdown' does not exist on type 'IntrinsicAttributes.

Does anybody know what is wrong with this code? Thanks in advance.

Answer

You will need to declare those types to the component itself:

const DatePickerComponent: React.FC<{
  name: string;
  text?: (text: string) => string;
  showMonthDropdown: boolean;
  showYearDropdown: boolean;
  showMonthYearDropdown: boolean;
}>;