Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input

[siddjain]

I am wondering if anyone has used this with Formik? I tried to use it like this:

import React from "react";
import DateTimePicker from "react-datetime-picker"; 
import { useFormikContext, useField } from "formik";

export const FormikDateTimeField = (props) => {
  const { setFieldValue } = useFormikContext();
  const [field] = useField(props.name);

  return (
    <DateTimePicker
      {...field}
      {...props}
      value={field.value}
      onChange={(val) => {
        setFieldValue(field.name, val);
      }}
    />
  );
};

and get this warning:

Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:
    <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="flex: 0 0 14.2857%; overflow: hidden;"><abbr aria-label="February 1, 2022">1</abbr></button>
    Formik cannot determine which value to update. For more info see https://formik.org/docs/api/formik#handleblur-e-any--void

Demo: https://codesandbox.io/s/bitter-silence-pmxgnd?file=/src/DateTimePicker.js:0-462