如何使用react-select过滤汽车列表

import React, { useState } from 'react';
import Select from 'react-select';

const cars = [
  { value: 'bmw', label: 'BMW' },
  { value: 'audi', label: 'Audi' },
  { value: 'mercedes', label: 'Mercedes' },
  { value: 'volkswagen', label: 'Volkswagen' },
  // 其他汽车品牌...
];

const App = () => {
  const [selectedCar, setSelectedCar] = useState(null);
  const [filteredCars, setFilteredCars] = useState(cars);
  
  // 过滤汽车列表的函数
  const filterCars = (selectedOption) => {
    setSelectedCar(selectedOption);
    
    if (selectedOption) {
      const filtered = cars.filter(car => car.value === selectedOption.value);
      setFilteredCars(filtered);
    } else {
      setFilteredCars(cars);
    }
  };
  
  return (
    <div>
      <h1>汽车列表</h1>
      <Select
        value={selectedCar}
        onChange={filterCars}
        options={cars}
      />
      <ul>
        {filteredCars.map(car => (
          <li key={car.value}>{car.label}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;