Estoy usando Material-ui Textfield para representar un objeto de matriz repetible:

 const [sections, setSections] = useState([ { Title: "Introduction", Text: "" }, { Title: "Relationship", Text: "" }, { Title: "Monitoring", Text: "" } ]);

Estoy representando las secciones con la función .map. El problema es que estoy usando en mis Textfields:

 <TextField value={el.Title} onChange={(event) => { el = { ...el, Title: event.target.value }; sections[ind] = el; console.log(sections); return setSections([...sections]); }} variant="outlined" label={`Section ${ind + 1}`} style={{ margin: "auto" }} />

este método onChange. Cada vez que cambio algo en Textfield, pierde el foco. También estoy usando TextareaAutosize y el mismo método para onChange:

 <TextareaAutosize label="Message" variant="outlined" placeholder="Write here..." value={el.Text} onChange={(event) => { el = { ...el, Text: event.target.value }; sections[ind] = el; console.log(sections); return setSections([...sections]); }} className={classes.messageStyle} style={{ width: "70%", marginLeft: "2.5%" }} minRows={5} />

Pero aquí NO estoy perdiendo el enfoque y todo funciona perfectamente bien. Descubrí que perder el foco es el resultado de volver a renderizar las secciones después de establecer un nuevo estado. Esto significa que se supone que TextField es un componente nuevo y es por eso que pierdo el enfoque. La pregunta es por qué con TextareaAutosize no enfrento este problema y cómo puedo solucionarlo para TextField.

Aquí está la caja de arena:

https://codesandbox.io/s/antiguo-trabajador-td4bm?file=/src/App.js:1023-1239