title: MUI Custom Text Field loses focus on state change
body: <p>I'm using <a href="https://mui.com/" rel="nofollow noreferrer">MUI</a> library to create my <a href="https://reactjs.org/" rel="nofollow noreferrer">React Js</a> app.</p>
  <p>Here I'm using the <a href="https://mui.com/components/text-fields/#uncontrolled-vs-controlled" rel="nofollow noreferrer">controlled Text Field</a> component to create a simple search UI.</p>
  <p>But there is something strange. <strong>The <code>Text Field</code> component loses focus after its value is changed.</strong>
  This is my first time facing this problem. I never faced this problem before.</p>
  <p><strong>How this could happen? And what is the solution.</strong></p>
  <p>Here is the code and the playground: <a href="https://codesandbox.io/s/mui-autocomplete-lost-focus-oenoo" rel="nofollow noreferrer">https://codesandbox.io/s/mui-autocomplete-lost-focus-oenoo</a>?</p>
  <p>Note: if I remove the <code>breakpoint type</code> from the code, the <code>Text Field</code> component still loses focus after its value is changed.</p>