React-datepicker component working on Storybook but onChange function does not fire in app

Question

I'm new to React, typescript and storybook. I added a date range picker to my storybook app using the react-datepicker library. This component works normally in the storybook and the onChange prop gives me the start date and end date I selected, but when I include this component in my actual application, the onChange function does not trigger. Can you help me where am I doing wrong?

DateRangePicker.tsx and DateRangePicker.type.ts belong to Storybook. TransactionPage.tsx belongs to the actual application

React version : ^18.2.0 React-datepicker version : ^4.8.0

DateRangePicker.tsx

const DateRangePicker: React.FC<CalendarProps> = (props) => {
  registerLocale("tr", tr);
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;

  const onDateChange = (dates: any) => {
    const [start, end] = dates;
    setDateRange([start, end]);
  };

  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(dates: any, event) => onDateChange(dates)}
      isClearable={true}
      placeholderText="Tarih Aralığı Seçiniz"
      monthsShown={2}
      adjustDateOnChange={false}
      locale="tr"
    />
  );
};

DateRangePicker.type.tsx

type NewCalendarProps<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = {
  selected?: Date | null | undefined;
  onChange(date: WithRange extends false | undefined ? Date | null : [Date | null, Date | null], event: React.SyntheticEvent<any> | undefined): void;
  startDate?: Date | null | undefined;
  endDate?: Date | null | undefined;
  selectsRange?: boolean | undefined;
  locale?: string | Locale | undefined;
  placeholderText?: string | undefined;
  showPreviousMonths?: boolean | undefined;
  monthsShown?: number | undefined;
  adjustDateOnChange?: boolean | undefined;
  onCalendarClose?(): void;
  value?: Date | null | undefined;
  onSelect?(date: Date, event: React.SyntheticEvent<any> | undefined): void;
  children?: React.ReactNode;
  customInput?: React.ReactNode | undefined;
};
export default NewCalendarProps;

TransactionPage.tsx

import "node_modules/react-datepicker/src/stylesheets/datepicker.scss";
import { DateRangePicker} from "@local/my-ui";

export default function TransactionsPage() {

  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  const onDateChange = (dates: any) => {
    const [start, end] = dates;
    setDateRange([start, end]);
  };

    return (
      <DateRangePicker
            selected={null}
            onChange={onDateChange}
            startDate={startDate}
            endDate={endDate}
            selectsRange
            onCalendarClose={() => {
              console.log(startDate, endDate);
            }}
            placeholderText="Tarih Aralığı Seçiniz"
            monthsShown={2}
            adjustDateOnChange={false}
          ></DateRangePicker>
)

}