title: React : Managing more than one select control inside a Dialog from Material UI
body: <p>I'm a newbie in React and Typescript and I'm trying to render some dropdowns from a dialog combining the Select(Chip) and Dialog from Material UI.</p>
  <p>The dropdowns are displayed well when I open them, but When I click on any of the displayed values, this overwrite the rest of the dropdowns.</p>
  <p>Any help with these?
  Thanks you all!</p>
  <pre><code>  [1]: https://i.stack.imgur.com/QkeZQ.png
    [2]: https://i.stack.imgur.com/P45sc.png
    [3]: https://i.stack.imgur.com/OWp7D.png
  
  export default function DialogSelect(props: { data: Map&lt;string, any[]&gt;; colName: string; }) {
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
  
    const [attributeName, setattributeName] = React.useState&lt;string[]&gt;([]);
  
    const handleChangeChip = (event: SelectChangeEvent&lt;typeof attributeName&gt;) =&gt; {
      const {
        target: { value },
      } = event;
      setattributeName(
        // On autofill we get a stringified value.
        typeof value === 'string' ? value.split(',') : value,
      );
    };
  
    const handleClickOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = (event: React.SyntheticEvent&lt;unknown&gt;, reason?: string) =&gt; {
      if (reason !== 'backdropClick') {
        setOpen(false);
      }
    };
  
    const handleDelete = (e: React.MouseEvent, value: string) =&gt; { 
      e.preventDefault();
      console.log(&quot;clicked delete&quot;);
      setattributeName((current) =&gt; _without(current, value));
    };
  
    return (
      &lt;div&gt;
        &lt;Button onClick={handleClickOpen}&gt;Open select dialog&lt;/Button&gt;
        &lt;Dialog disableEscapeKeyDown open={open} onClose={handleClose}&gt;
          &lt;DialogTitle&gt;Fill the form&lt;/DialogTitle&gt;
          &lt;DialogContent&gt;
            &lt;Box component=&quot;form&quot; sx={{ display: 'flex', flexWrap: 'wrap' }}&gt;
              {Array.from(props.data).map((attribute, index) =&gt; (
                &lt;FormControl sx={{ m: 1, width: 300}}&gt;
                &lt;InputLabel id={&quot;demo-multiple-chip-label&quot;+attribute[0]}&gt;{attribute[0]}&lt;/InputLabel&gt;
                &lt;Select sx={{backgroundColor:'honeydew'}}
                  labelId={&quot;demo-multiple-chip-label&quot;+attribute[0]}
                  id={&quot;demo-multiple-chip&quot;+attribute[0]}
                  className=&quot;attributeValues&quot;
                  multiple
                  value={attributeName}
                  onChange={handleChangeChip}
                  input={&lt;OutlinedInput id=&quot;select-multiple-chip&quot; label={props.colName} /&gt;}
                  renderValue={(selected) =&gt; (
                    &lt;Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}&gt;
                      {selected.map((value) =&gt; (
                        &lt;Chip clickable variant=&quot;outlined&quot; deleteIcon={
                          &lt;CancelIcon
                            onMouseDown={(event) =&gt; event.stopPropagation()}
                          /&gt;
                        } onDelete={(e) =&gt; handleDelete(e, value)}  key={value} label={value} /&gt;
                      ))}
                    &lt;/Box&gt;
                  )}
                  MenuProps={MenuProps}
                &gt;
                  {attribute[1].map((name: any) =&gt; (
                    
                    &lt;MenuItem
                      key={name}
                      value={name}
                      style={getStyles(name, attributeName, theme)}
                    &gt;
                      
                      {name}
                    &lt;/MenuItem&gt;
                    
                  ))}
                &lt;/Select&gt;
              &lt;/FormControl&gt;
              ))}
            &lt;/Box&gt;
          &lt;/DialogContent&gt;
          &lt;DialogActions&gt;
            &lt;Button onClick={handleClose}&gt;Cancel&lt;/Button&gt;
            &lt;Button onClick={handleClose}&gt;Ok&lt;/Button&gt;
          &lt;/DialogActions&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>