Popper.js Modifiers

Question

In our React & Typescript app, we are using react-datepicker lib , which itself uses popper.js. I'm trying to assign PopperModifiers , just as shown here: https://reactdatepicker.com/#example-configure-popper-properties

But even if we use exactly what is in the example, we get the following typescript error:

Overload 1 of 2, '(props: ReactDatePickerProps |
Readonly<ReactDatePickerProps>): ReactDatePicker', gave the following
error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.   Overload 2 of 2, '(props: ReactDatePickerProps,
 context: any): ReactDatePicker', gave the following error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.ts(2769)

Why can't we assign the Modifiers array like it is in the example? Anyone has an example of how popper modifiers are used with typescript?

EDIT: What really confuses me is this property of the Popper.Modifiers type:

 [name: string]: (BaseModifier & Record<string, any>) | undefined;

Can someone please explain it here?

EDI2: This is our current implementation of the react-datepicker, problem is the popperModifier attribute:

 <DatePicker
                selected={this.value ? new Date(this.value) : null}
                onChange={this.onChange}
                peekNextMonth
                showMonthDropdown={this.props.showMonthDropdown}
                showYearDropdown={this.props.showYearDropdown}
                dropdownMode={this.props.dropdownMode}
                dateFormat={i18next.t("common.dateformat")}
                popperPlacement="bottom-end"
                popperClassName="da-datepicker-popup"
                popperModifiers={[
                    {
                      name: "offset",
                      options: {
                        offset: [5, 10],
                      },
                    },
                    {
                      name: "preventOverflow",
                      options: {
                        rootBoundary: "viewport",
                        tether: false,
                        altAxis: true,
                      },
                    },
                  ]}
                includeDates={this.props.availableDates}
                adjustDateOnChange={false}
                yearDropdownItemNumber={this.props.yearDropdownItemNumber}
                maxDate={this.props.maxDate}
                minDate={this.props.minDate}
                strictParsing
                portalId="root-portal" />

Answer 1

You need to install the type definitions.

See: https://www.npmjs.com/package/@types/react-datepicker

Answer 2

You should use react-popper docs.

https://popper.js.org/docs/v2/modifiers/