Не происходит перерендер компонента после изменения стейта

Помогите разобраться. Стоит задача на React вывести в таблицу данные из файла data.json. Есть 4 кнопки, которые должны сортировать данные в каждом столбце при их нажатии. Изначально колонки не сортированы. При реализации функциональными компонентами, не происходит перерендер стейт-переменной, хотя данные заносятся в нее при клике. Когда реализую классовым компонентом, все работает, как надо! Спасибо!

import usersJSON from './data.json'


function App() {
  const [data, setData] = useState(usersJSON)

  const handleClickButton = (type) => {
      setData(data.sort((a, b) => a[type] > b[type] ? 1 : -1))
  }

  return (
        <div className="text-center buttons">
          <header className="text-center">
            <h1>Leaderboard</h1>
          </header>
          <div className="text-center buttons">
            <Age  handleClickButton={handleClickButton}/>
            <Name handleClickButton={handleClickButton}/>
            <Points handleClickButton={handleClickButton}/>
            <Rank handleClickButton={handleClickButton}/>
            <Table data={data}/>
          </div>
        </div>
  );

}

export default App

const Age = ({ handleClickButton }) => {

    return (
        <button type='button' className="btn btn-primary age" name="age" onClick={() => handleClickButton('age')}>
        Age
    </button>
    );

};

export default Age


 const Table = ({ data }) =>{

    return (
      <div>
        <table className="table table-striped" data-testid="leaderboard-table">
          <thead>
            <tr key="head">
              <th>Age</th>
              <th>Name</th>
              <th>Points</th>
              <th>Rank</th>
            </tr>
          </thead>
          <tbody >
            { data.map((user, index) => (
                <tr key={index}>
                    <td >{user.age}</td>
                    <td >{user.name}</td>
                    <td >{user.points}</td>
                    <td >{user.rank}</td>
                </tr>
                )
            )
            }
          </tbody>
        </table>
      </div>
    );
}

export default Table

data.json - 4 объекта для примера

{
    "rank": 3,
    "points": 3123,
    "name": "Marlana J. Huff",
    "age": 41
  },
  {
    "rank": 10,
    "points": 45345,
    "name": "Susan D. Jimenez",
    "age": 42
  },
  {
    "rank": 14,
    "points": 312,
    "name": "Richard M. Mass",
    "age": 11
  },
  {
    "rank": 13,
    "points": 3124,
    "name": "Joan T. Covert",
    "age": 13
  },