Estoy usando React con MUI y Formik para crear un formulario, pero después de escribir un carácter en el campo de entrada, pierde el foco. De hecho, envuelvo cada campo de entrada en un componente para que pueda reutilizarse muchas veces como un código más limpio. Pero resulta que pierde el foco cada vez que se vuelve a renderizar onchange.

Lo que he hecho hasta ahora:

• generando uuid para cada clave (no funciona)
• configurar AutoFocus en la entrada (tampoco funcionó y creó un bucle infinito en su lugar)
• Sacar el componente FieldStack de FormComponent tampoco es una solución porque pierde los valores iniciales de Formik.

Aquí está mi código de demostración en vivo: https://codesandbox.io/s/condescending-resonance-5r5nv?file=/src/Form.js

Cualquier pista es muy apreciada. Gracias por adelantado.

 import { Form, FormikProvider, useFormik, FieldArray } from "formik"; import { TextField, Button, Stack } from "@mui/material"; import uuid from "react-uuid"; export default function FormComponent() { const formik = useFormik({ enableReinitialize: false, initialValues: { name: "Jordan Spikes", description: "Just a regular dude", state: "Alabama", country: "USA" } }); const { handleSubmit, getFieldProps } = formik; const FieldStack = (props) => ( <Stack key={uuid()} direction={{ xs: "column", md: "row" }} sx={{ mb: 3 }} spacing={2} > <TextField fullWidth label={props.name} {...getFieldProps(`${props.data}`)} /> </Stack> ); return ( <FormikProvider value={formik}> <Form autoComplete="off" noValidate onSubmit={handleSubmit}> <h3>Form</h3> <FieldStack name="Name" data="name" /> <FieldStack name="Description" data="description" /> <FieldStack name="State" data="state" /> <FieldStack name="Country" data="country" /> </Form> </FormikProvider> ); }