I am learning react and I am trying to sort and filter through a list to be displayed on a website. I created a sort function for example and used Formgroups for my checkboxes. I do not understand how I can link the checkboxes and make them work only when the boxes have been clicked on. `const [highestAmount, setHighestAmount] = useState(false); //make an empty list that then will be populated when the state changes

const [highestAmount, setHighestAmount] = useState(false);
        //make an empty list that then will be populated when the state changes

       const sortHighestAmount = list.sort(function (a, b) {
            return a.amount - b.amount;
        }).reverse();
      
        console.log(sortHighestAmount);



const [lowestAmount, setLowestAmount] = useState(false);

    const sortHighestAmount =  (event) => {
        console.log(event.target.value);
        const Highest = list.sort(function (a, b) {
        return a.amount - b.amount;
    });
  
    }

<FormControlLabel control={<Checkbox checked={highestAmount} onChange={(event) => setHighestAmount(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />} label="Highest Amount" />

        <FormControlLabel control={<Checkbox
            checked={lowestAmount}
            onChange={(event) => setLowestAmount(event.target.checked)}
            inputProps={{ 'aria-label': 'controlled' }}
        />} label="Lowest Amount" />

`

I am trying to filter through a list. I have written a sort code, but I am finding it a bit challenging to do a useHandle state or any other hook that can help me sort through the list.