title: How to style list option in Autocomplete material ui with use of renderOption?
body: <p>I am trying hard to customize option elements in autocomplete list. I want to do this by use of renderOptions prop, where i can create DOM elements. Then, i can pretty easly add styles with sx or styled components.</p>
  <p>But something is wrong. When i try to render options list elements wrapped in divs, the names of the movies are hidden (?)
  They are rendered, because i can still choose option, and after that it is showned as selected, but the input list is still broken, and CSS styles are not applied.</p>
  <p>What I am missing ? Autocomplete and its styling is new for me.</p>
  <p>The code:</p>
  <pre><code>&lt;Autocomplete
          freeSolo
          id=&quot;free-solo-2-demo&quot;
          disableClearable
          options={top100Films.map((option) =&gt; option.title)}
          renderOption={(props, option) =&gt; {
            return (
              &lt;li {...props}&gt;
                &lt;div
                  sx={{
                    backgroundColor: &quot;red&quot;,
                    color: &quot;orange&quot;
                  }}
                &gt;
                  {option.title}
                &lt;/div&gt;
              &lt;/li&gt;
            );
          }}
          renderInput={(params) =&gt; (
            &lt;TextField
              {...params}
              label=&quot;Search input&quot;
              InputProps={{
                ...params.InputProps,
                type: &quot;search&quot;
              }}
            /&gt;
          )}
        /&gt;
      &lt;/Stack&gt;
    );
  }
  </code></pre>
  <p>Heres the demo :  <a href="https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js</a></p>