title: mui select menu is not allowing "right to left"
body: <p>so im trying to do rtl using material ui, most components so far works on rtl but select menu is not changing... here is my current code</p>
  <pre class="lang-js prettyprint-override"><code>const theme = createTheme({
    palette: {
      primary: {
        light: &quot;#ff685c&quot;,
        main: &quot;#d43232&quot;,
        dark: &quot;#9b000b&quot;,
        contrastText: &quot;#ffffff&quot;,
      },
      direction: &quot;rtl&quot;,
    },
  });
  function App() {
    return (
      &lt;Fragment&gt;
        &lt;CssBaseline /&gt;
        &lt;Container maxWidth=&quot;lg&quot;&gt;
          &lt;ThemeProvider theme={theme}&gt;
      &lt;Box
        sx={{
          display: &quot;flex&quot;,
          flexDirection: &quot;row&quot;,
          justifyContent: &quot;space-between&quot;,
          alignItems: &quot;center&quot;,
          maxWidth: &quot;100%&quot;,
          maxHeight: &quot;auto&quot;,
        }}
        dir=&quot;rtl&quot;
      &gt;
        &lt;Box sx={{ width: &quot;35%&quot;, display: &quot;flex&quot;, flexDirection: &quot;column&quot;, gap: &quot;24px&quot; }} dir=&quot;rtl&quot;&gt;
          &lt;Box sx={{ display: &quot;flex&quot;, flexDirection: &quot;row&quot;, gap: &quot;16px&quot; }} dir=&quot;rtl&quot;&gt;
            &lt;Box sx={{ minWidth: 160 }}&gt;
              &lt;FormControl fullWidth&gt;
                &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;عقارات&lt;/InputLabel&gt;
                &lt;Select
                  labelId=&quot;demo-simple-select-label&quot;
                  id=&quot;demo-simple-select&quot;
                  value={age}
                  label=&quot;طبيعة العقار&quot;
                  onChange={handleChange}
                &gt;
                  &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
                  &lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
                  &lt;MenuItem value={30}&gt;Thirty&lt;/MenuItem&gt;
                &lt;/Select&gt;
              &lt;/FormControl&gt;
            &lt;/Box&gt;
          &lt;/Box&gt;
        &lt;/Box&gt;
        &lt;Box sx={{ width: &quot;60%&quot; }}&gt;
          &lt;img src={map} className=&quot;image-fill&quot; alt=&quot;alt&quot; /&gt;
        &lt;/Box&gt;
      &lt;/Box&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Container&gt;
      &lt;/Fragment&gt;
    );
  }
  </code></pre>
  <p>i don't know why rtl not working for   i tried to do <code>dir = &quot;rtl&quot;</code> to each component but it's not changing the  stays at the same place</p>