I would like to create a form with a date picker. So i choose React DayPicker v8 now i would like to implement this picker in my current formik form.

I created a date picker component:

import React from "react";
import { Form, Popover, OverlayTrigger } from "react-bootstrap";
import { DayPicker, useInput } from "react-day-picker";
import "react-day-picker/dist/style.css";

const DatePicker = (props) => {
  const { inputProps, dayPickerProps } = useInput({
    format: "dd.MM.yyyy",
    required: true,
  });

  const handleChange = (value) => {
    props.onChange(props.name, value);
  };

  const popover = (
    <Popover id="popover-basic" className="mw-100">
      <Popover.Body>
        <DayPicker showWeekNumber weekStartsOn={1} {...dayPickerProps} />
      </Popover.Body>
    </Popover>
  );

  return (
    <>
      <OverlayTrigger
        rootClose
        trigger="click"
        placement="bottom-start"
        overlay={popover}
      >
        <Form.Control
          {...inputProps}
          onChange={handleChange}
          value={props.value}
          name={props.name}
          id={props.name}
        />
      </OverlayTrigger>
    </>
  );
};

export default DatePicker;

DatePicker.js

<Col>
  <Form.Group className="mb-3">
    <Form.Label htmlFor="startdate">Start Date</Form.Label>
    <DatePicker
      name="startdate"
      value={formikProps.values.startdate}
      onChange={formikProps.setFieldValue}
    />
  </Form.Group>
</Col>

Home.js

My problem is in my browser DevTools the value from datepicker changed correctly <input name="startdate" id="startdate" class="form-control" value="23.06.2022"> but in my formikProps.values.startdate I only get the old initialValue.

Additionally if i add a log event to the handleChange function in the DatePicker.js Component the log will not show up. Why?

Is this the correct way? In a react-select field this code works completely fine.