按筛选器对数据进行排序，react js

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 20 }
];

function App() {
  const [inputValue, setInputValue] = useState('');
  const [sortedData, setSortedData] = useState(data);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSort = () => {
    const sorted = [...sortedData].sort((a, b) => a.age - b.age);
    setSortedData(sorted);
  };

  const filteredData = sortedData.filter(item =>
    item.name.toLowerCase().includes(inputValue.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSort}>Sort by Age</button>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name} - {item.age}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;