如何在Formik中使用datalist输入？

import { Field, Form, Formik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  username: Yup.string().required('Username is required'),
});

const MyForm = () => {
  return (
    <Formik
      initialValues={{ username: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Form>
        <Field name="username" render={({ field }) => (
          <div>
            <input list="usernames" {...field} />
            <datalist id="usernames">
              <option value="John" />
              <option value="Jane" />
              <option value="Alice" />
              <option value="Bob" />
            </datalist>
          </div>
        )} />

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default MyForm;