So i m trying to rerender a list by filtered values. The list is already rendered with all the values. I want to render it again with a dropdown of options. I get my values from a JSON locally.

[ { "brand": "toyota", "model": "corona", "cylinders": 4, "horsepower": 96, "origin": "Japan", "price": 40000 }, ... ]

export const FilterBrand = (props) => {
  const brands = props.list
    .map((vehicle) => vehicle.brand)
    .filter((value, index, vehicle) => vehicle.indexOf(value) === index);

  const handleChange = (e) => {
    // console.log(e.target.value);
  };
  return (
    <select onChange={(e) => props.handleChange(e.target.value)}>
      {brands.map((vehicle, key) => (
        <option key={key} value={key}>
          {vehicle}
        </option>
      ))}
    </select>
  );
}; here is my component



<div className="filter-brand">
 <FilterBrand
 list={list}
 handleChange={(value) => console.log(value)}
 />
</div here is my component imported in main app, JSON is also imported in main app and passed as props in my component.
How can I render it again based on the options from the dropdown?