title: Get value from few Select in Material-UI
body: <p>I have two MUI Select components on my page. I'm trying to set values depends on id of Select. I've checked (id === &quot;breed-select&quot;) in console and (at first) it's true, but immediately after that it become false, and i cant understand why. Where i made a mistake? May be there is a better way to set values of two Select components? <a href="https://codesandbox.io/s/epic-bird-cebztm" rel="nofollow noreferrer">CodeSandbox</a></p>
  <pre><code>import React from 'react';
  import './AddCatPopup.css';
  import {Box, Button, FormControl, InputLabel, MenuItem, Select, TextField} from '@mui/material';
  import {theme} from '../../theme';
  import {ThemeProvider} from '@mui/material/styles';
  
  function AddCatPopup({ breeds, isOpen, onClose, onAddCat }) {
  
    const breedsName = breeds.map(item =&gt; item.nameBreed);
  
    const colorsArray = [
      'black',
      'white',
      'grey',
      'red',
      'multicolor'
    ];
  
    const [name, setName] = React.useState('');
    const [price, setPrice] = React.useState(0);
    const [color, setColor] = React.useState('');
    const [age, setAge] = React.useState(0);
    const [breed, setBreed] = React.useState('');
  
    function handleChange(event) {
      const {
        target: { value, id }
      } = event;
      id === &quot;breed-select&quot; ? setBreed(value) : setColor(value);
    }
  
    function handleSubmit(e) {
      e.preventDefault();
    }
  
    return(
      &lt;section className={`popup ${isOpen &amp;&amp; 'popup_opened'}`}&gt;
        &lt;div className={'popup__container'}&gt;
          &lt;button type=&quot;button&quot; className={'popup__close-btn'} onClick={onClose}&gt;&lt;/button&gt;
          &lt;p className={'popup__title'}&gt;Enter info about cat&lt;/p&gt;
          &lt;TextField sx={{ mt: 1, mb: 1 }}
                     id=&quot;standard-required&quot;
                     variant=&quot;standard&quot;
                     label=&quot;Name&quot;
                     required /&gt;
  
          &lt;TextField sx={{ mt: 1, mb: 1 }}
                     id=&quot;standard-required&quot;
                     variant=&quot;standard&quot;
                     label=&quot;Price&quot;
                     required /&gt;
  
          &lt;FormControl sx={{ mt: 1, mb: 1 }}
                       variant=&quot;standard&quot;
                       required&gt;
            &lt;InputLabel id=&quot;breed-label&quot;&gt;Breed&lt;/InputLabel&gt;
            &lt;Select
              labelId=&quot;filter-breed&quot;
              id=&quot;breed-select&quot;
              label=&quot;Breed&quot;
              value={breed}
              onChange={handleChange}
            &gt;
              {breedsName.map((item) =&gt; (
                &lt;MenuItem
                  key={item}
                  value={item}
                  id=&quot;breed-select&quot;
                &gt;
                  {item}
                &lt;/MenuItem&gt;
              ))}
            &lt;/Select&gt;
          &lt;/FormControl&gt;
  
          &lt;FormControl sx={{ mt: 1, mb: 1 }}
                       variant=&quot;standard&quot;
                       required&gt;
            &lt;InputLabel id=&quot;color-label&quot;&gt;Color&lt;/InputLabel&gt;
            &lt;Select
              labelId=&quot;filter-color&quot;
              id=&quot;color-select&quot;
              label=&quot;Color&quot;
              value={color}
              onChange={handleChange}
            &gt;
              {colorsArray.map((item) =&gt; (
                &lt;MenuItem
                  key={item}
                  value={item}
                  id=&quot;color-select&quot;
                &gt;
                  {item}
                &lt;/MenuItem&gt;
              ))}
            &lt;/Select&gt;
          &lt;/FormControl&gt;
  
          &lt;TextField sx={{ mt: 1, mb: 1 }}
                     id=&quot;standard-required&quot;
                     variant=&quot;standard&quot;
                     label=&quot;Age&quot;
                     required /&gt;
  
          &lt;ThemeProvider theme={theme}&gt;
            &lt;Button sx={{ mt: 1, mb: 1 }}
                    variant=&quot;contained&quot;
                    color={'secondary'}
                    onClick={handleSubmit}&gt;
              Add
            &lt;/Button&gt;
          &lt;/ThemeProvider&gt;
  
        &lt;/div&gt;
      &lt;/section&gt;
    );
  }
  
  export default AddCatPopup;
  </code></pre>