如何在react中过滤数组而不将其留空？

import React, { useState } from 'react';

const FilteredList = () => {
  const [list, setList] = useState([
    { id: 1, name: 'Apple', category: 'Fruit' },
    { id: 2, name: 'Banana', category: 'Fruit' },
    { id: 3, name: 'Carrot', category: 'Vegetable' },
    { id: 4, name: 'Tomato', category: 'Vegetable' },
  ]);

  const filteredList = list.filter(item => item.category === 'Fruit');

  return (
    <div>
      <h2>Filtered List:</h2>
      {filteredList.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default FilteredList;