如何根据3个选择下拉列表的值过滤React状态？

import React, { useState } from 'react';

const FilteredList = () => {
  const [list, setList] = useState([
    { name: 'Apple', category: 'Fruit', color: 'Red' },
    { name: 'Banana', category: 'Fruit', color: 'Yellow' },
    { name: 'Carrot', category: 'Vegetable', color: 'Orange' },
    { name: 'Broccoli', category: 'Vegetable', color: 'Green' },
  ]);

  const [selectedCategory, setSelectedCategory] = useState('');
  const [selectedColor, setSelectedColor] = useState('');

  const handleCategoryChange = (event) => {
    setSelectedCategory(event.target.value);
  };

  const handleColorChange = (event) => {
    setSelectedColor(event.target.value);
  };

  const filteredList = list.filter((item) => {
    if (selectedCategory && item.category !== selectedCategory) {
      return false;
    }
    if (selectedColor && item.color !== selectedColor) {
      return false;
    }
    return true;
  });

  return (
    <div>
      <label>
        Category:
        <select value={selectedCategory} onChange={handleCategoryChange}>
          <option value="">All</option>
          <option value="Fruit">Fruit</option>
          <option value="Vegetable">Vegetable</option>
        </select>
      </label>
      <br />
      <label>
        Color:
        <select value={selectedColor} onChange={handleColorChange}>
          <option value="">All</option>
          <option value="Red">Red</option>
          <option value="Yellow">Yellow</option>
          <option value="Orange">Orange</option>
          <option value="Green">Green</option>
        </select>
      </label>
      <br />
      <ul>
        {filteredList.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;