How to use Datepick of Mui with Formik

Hello Nico, Thank you for using Web-Brackets.com, you are using a different way to get the data onChange so the function which called  formik.handleChange doesn't work because somehow the event does not pass to handleChange so you do it in this way 

<DatePicker
 label="Departure Date"
 id="departureDate"
 name="departureDate"
 value={formik.values.departureDate}
 onChange={(val) => {
 console.log(val);
 //val is the variable which contain the selected date
 //You can set it anywhere
 }}
 renderInput={(params) => <TextField {...params} />}
/>

so the full code should looks like 

import React from "react";
import { render } from "react-dom";
import { useFormik } from "formik";

import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DatePicker from "@mui/lab/DatePicker";

import "./style.css";

export function App() {
 // A custom validation function. This must return an object
 // which keys are symmetrical to our values/initialValues
 const validate = (values) => {
 const errors = {};

 return errors;
 };

 const formik = useFormik({
 initialValues: {
 departureDate: Date.now()
 },
 validate,
 onSubmit: (values) => {
 alert(JSON.stringify(values, null, 2));
 }
 });

 return (
 <div style={{ height: 400, width: "100%" }}>
 <form>
 <div className="form-group row">
 <label for="departureDate" className="col-sm-7 col-form-label">
 Departure Date
 </label>
 <div className="col-sm-5">
 <LocalizationProvider dateAdapter={AdapterDateFns}>
 <DatePicker
 label="Departure Date"
 id="departureDate"
 name="departureDate"
 value={formik.values.departureDate}
 onChange={(val) => {
 console.log(val);
 //val is the variable which contain the selected date
 //You can set it anywhere
 }}
 renderInput={(params) => <TextField {...params} />}
 />
 </LocalizationProvider>
 {formik.errors.departureDate ? (
 <div>{formik.errors.departureDate}</div>
 ) : null}
 </div>
 </div>
 </form>
 </div>
 );
}

render(<App />, document.getElementById("root"));

this will not make an error when you select a date but the point is setting the value to the form you can do it using a function called setFieldValue and it should be use like this 

<LocalizationProvider dateAdapter={AdapterDateFns}>
 <DatePicker
 label="Departure Date"
 id="departureDate"
 name="departureDate"
 value={formik.values.departureDate}
 onChange={(val) => {
 //val is the variable which contain the selected date
 //You can set it anywhere
 formik.setFieldValue('departureDate', val);
 }}
 renderInput={(params) => <TextField {...params} />}
 />
</LocalizationProvider>
{formik.errors.departureDate ? (
 <div>{formik.errors.departureDate}</div>
) : null}
{console.log(formik.values.departureDate)}

Good luck