title: Autocomplete with custom input in material ui not working
body: <p>I am able to use the autocomplete by selecting values from the list. Now I want to add a new value in the selection. I tried multiple options including <code>onChange</code> but couldn't implement. </p>
  
  <p><a href="https://i.stack.imgur.com/VAigL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VAigL.png" alt="enter image description here"></a></p>
  
  <p>If user types in something and clicks outside the textbox it should convert freetext into a tag. Also, allow user to continue adding more tags from the predefined list/free text.</p>
  
  <p>I am trying out the options <a href="https://codesandbox.io/s/material-demo-yb2sn?file=/demo.js" rel="nofollow noreferrer">here</a> but to no luck. Is this even possible or do I need to look for other options?</p>