Get value from few Select in Material-UI

I have two MUI Select components on my page. I’m trying to set values depends on id of Select. I’ve checked (id === “breed-select”) 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?

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 => 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 === "breed-select" ? setBreed(value) : setColor(value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return(
    <section className={`popup ${isOpen && 'popup_opened'}`}>
      <div className={'popup__container'}>
        <button type="button" className={'popup__close-btn'} onClick={onClose}></button>
        <p className={'popup__title'}>Enter info about cat</p>
        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Name"
                   required />

        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Price"
                   required />

        <FormControl sx={{ mt: 1, mb: 1 }}
                     variant="standard"
                     required>
          <InputLabel id="breed-label">Breed</InputLabel>
          <Select
            labelId="filter-breed"
            id="breed-select"
            label="Breed"
            value={breed}
            onChange={handleChange}
          >
            {breedsName.map((item) => (
              <MenuItem
                key={item}
                value={item}
                id="breed-select"
                onClick={handleChange}
              >
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <FormControl sx={{ mt: 1, mb: 1 }}
                     variant="standard"
                     required>
          <InputLabel id="color-label">Color</InputLabel>
          <Select
            labelId="filter-color"
            id="color-select"
            label="Color"
            value={color}
          >
            {colorsArray.map((item) => (
              <MenuItem
                key={item}
                value={item}
                id="color-select"
                onClick={handleChange}
              >
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Age"
                   required />

        <ThemeProvider theme={theme}>
          <Button sx={{ mt: 1, mb: 1 }}
                  variant="contained"
                  color={'secondary'}
                  onClick={handleSubmit}>
            Add
          </Button>
        </ThemeProvider>

      </div>
    </section>
  );
}

export default AddCatPopup;