ANTd DatePicker wrapper with strings as values (any moment.js converts are inside component)

StringDatePicker.tsx

import { DatePicker } from "antd";
import moment, { Moment } from "moment";
import { useEffect, useState } from "react";

export type FormFieldProps<InVal, OutVal> = {
  value?: InVal;
  disabled?: boolean;
  onChange?: (value?: OutVal) => void;
};
export type FormField<InVal, OutVal = InVal> = React.FC<
  FormFieldProps<InVal, OutVal>
>;

/**
ANTd DatePicker wrapper with strings as values
*/
export const StringDatePicker: FormField<string> = ({ value, onChange }) => {
  const [momentVal, setMomentVal] = useState<Moment>();
  useEffect(() => setMomentVal(moment(value)), [value]);
  const onChangeMoment = (_: any, str: string) => onChange!(str);
  return <DatePicker value={momentVal} onChange={onChangeMoment} />;
};


export const StringDateRange: FormField<[string, string]> = ({ value, onChange }) => {
  const [momentVal, setMomentVal] = useState<[Moment, Moment]>();
  useEffect(
    () => setMomentVal([moment(value?.[0]), moment(value?.[1])]),
    [value]
  );
  const onChangeMoment = (_: any, str: [string, string]) => onChange!(str);
  return <DatePicker.RangePicker value={momentVal} onChange={onChangeMoment} />;
};