I am using Material-ui Textfield to represent repeatable array object:

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

I am rendering the sections with .map function. The problem is that I am using in my 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" }}
            />

this onChange method. Each time I change someting in Textfield it looses focus. I am also using TextareaAutosize and same method for 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}
            />

But here I am NOT loosing focus and everything works perfectly fine. I found out that loosing focus is a result from re-rendering the sections after setting new state. This means TextField is assumed to be new component and that's why I loose focus. The questions is why with TextareaAutosize I do not face this issue and how I can fix it for TextField?

Here is the sandbox:

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