I’m encountering an issue with a React component that accepts two props. Here’s how it’s set up:

type Props<T> = {
  value: T,
  onChange: (date: T) => void
}

const DateRangeInput: React.FC<Props<DateRange | Date | undefined>> = ({
  // Component code here
})

And here’s an example usage of the component:

import { DateRange } from "../Common/DateRangeInputV2";
const Loading = lazy(() => import("../Common/Loading"));

export type DateRange = {
  start: Date | undefined;
  end: Date | undefined;
};

export const InsuranceDetails = () => {
  const [date, setDate] = useState<DateRange>({
    start: undefined,
    end: undefined,
  });

  const handleDateChange = (date: DateRange) => {
    console.log("date in insurance", date);
    setDate(date);
  };

  return (
    <div>
      <DateRangeInput
        name="range_date"
        value={date}
        onChange={handleDateChange}
      />
    </div>
  );
};

The error I’m encountering is:

Type 'void' is not assignable to type 'DateRange | Date | undefined'.ts(2322)
DateRangeInputVivek.tsx(41, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Props<DateRange | Date | undefined>'
(property) onChange: (date: DateRange | Date | undefined) => void

is there any way to handle this, because the type of value should reflect onChange . Can anyone help me with this?

ps : without using any

what I am expecting is as the type of value is of DateRange then same should be accepted by my onChange