Me gustaría crear un formulario con un selector de fecha. Así que elijo React DayPicker v8 ahora me gustaría implementar este selector en mi formulario formik actual.

Creé un componente selector de fecha:

 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;

Selector de fechas.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>

Inicio.js

Mi problema es que en mi navegador DevTools el valor de datepicker cambió correctamente <input name="startdate" id="startdate" class="form-control" value="23.06.2022"> pero en mi formikProps.values.startdate solo obtener el antiguo valor inicial.

Además, si agrego un evento de registro a la función handleChange en el componente DatePicker.js, el registro no aparecerá. ¿Por qué?

¿Es esta la forma correcta? En un campo de selección de reacción, este código funciona completamente bien.