Не получается сделать сортировку элементов таблицы

у меня есть json из которого я беру данные и заполняю ими таблицу, по нажатию на кнопки мне нужно отсортировать данные в зависимости от кнопки на которую я нажимаю, то есть, к примеру, если "name" - сортируются поля name

import React, {useEffect, useState} from 'react';
import "./Dashboard.css"
import {ButtonGroup} from "react-bootstrap";
import {Button} from "react-bootstrap";

const Dashboard = () => {

const [sites, setSites] = useState([])
const [tests, setTests] = useState([])
const [value, setValue] = useState(tests)

useEffect(() => {
    fetch("http://localhost:3000/data.json")
        .then(response => response.json())
        .then(data => {
            setSites(data.sites)
            setTests(data.tests)

            console.log(data)
        })
}, [])

const getItem = (siteId) => {
    let site = sites.find(item => item.id === siteId)
    return site ? site.url : ""
    }


const filter = (item) => {
if(item === tests.name){
setValue(tests.name)
}if(item === tests.status){
setValue(tests.status)
}if(item === tests.type){
setValue(tests.type)
}if(item === tests.site){
setValue(tests.site)
}
    }

return (

    <div>
        <h1 className="dashboard">Dashboard</h1>
        <input className="input" type="text" placeholder="what test are you looking for"/>

        <ButtonGroup aria-label="Basic example">

            <Button onClick={() => filter(tests.name)} variant="secondary">Name</Button>
            <Button onClick={() => filter(tests.status)} variant="secondary">Status</Button>
            <Button onClick={() => filter(tests.type)} variant="secondary">Type</Button>
            <Button onClick={() => filter(tests.site)} variant="secondary">Site</Button>
        </ButtonGroup>
        <table className="table" border="0">

            <tbody>
            {value.map(item=>
                <tr key={item.id}>
                    <td className="td">{item.name}</td>
                    <td className="td">{item.status}</td>
                    <td className="td">{item.type}</td>
                    <td className="td">{getItem(item.siteId)}</td>
                </tr>

            )}
            </tbody>
        </table>

    </div>
)
}

export default Dashboard

сам json вот такой:

{
  "sites": [
    {
      "id": 1,
      "url": "https://market.company.com"
    },
    {
      "id": 2,
      "url": "https://www.delivery.company.com"
    },
    {
      "id": 3,
      "url": "http://games.company.com"
    }
  ],
  "tests": [
    {
      "id": 1,
      "name": "Prototype of the new map",
      "type": "CLASSIC",
      "status": "PAUSED",
      "siteId": 2
    },
    {
      "id": 2,
      "name": "Dark theme test",
      "type": "MVT",
      "status": "DRAFT",
      "siteId": 3
    },
    {
      "id": 3,
      "name": "New Year's Sale",
      "type": "MVT",
      "status": "STOPPED",
      "siteId": 1
    },
    {
      "id": 4,
      "name": "Order basket redesing",
      "type": "CLASSIC",
      "status": "ONLINE",
      "siteId": 1
    },
    {
      "id": 5,
      "name": "Spring promotion",
      "type": "SERVER_SIDE",
      "status": "DRAFT",
      "siteId": 2
    },
    {
      "id": 6,
      "name": "Prototype of a new header",
      "type": "SERVER_SIDE",
      "status": "ONLINE",
      "siteId": 3
    },
    {
      "id": 7,
      "name": "New Year's Sale Copy 1",
      "type": "MVT",
      "status": "DRAFT",
      "siteId": 1
    }
  ]
}