Table Sort Based On a Value from the array saved in a stateArray

Question

I was trying to do the sorting on Click of a button I tried all the methods based on sort()but I am unable to do so,below is the code snippet for the table values.

import React, { useEffect, useState } from 'react';
import html2canvas from "html2canvas";

export default function PointsTable() {
  const [teamName, setTeamName] = useState("");
  const [killPoints, setKillPoints] = useState();
  const [placePoints, setPlacePoints] = useState();
  const [chickenDinner, setChickenDinner] = useState();

  const [tableData, setTableData] = useState([]);

  const [tableValues, setTableValues] = useState([]);

  const handleChange = (e) => {
    //const name = e.target.name
    //const value = e.target.value
    const { name, value } = e.target;
    // console.log(value)

    if (name === "teamName") {
      setTeamName(value);
    } else if (name === "chickenDinner") {
      setChickenDinner(value);
    } else if (name === "killPoints") {
      setKillPoints(value);
    } else if (name === "placePoints") {
      setPlacePoints(value);
    }
  };

  const handleDownloadImage = async () => {
    const element = document.getElementById("print"),
      canvas = await html2canvas(element, {
        scale: 10
      }),
      data = canvas.toDataURL("image/jpg"),
      link = document.createElement("a");

    link.href = data;
    link.download = "downloaded-image.jpg";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

This is to add the input values to the array

  const addData = () => {
    let data = {
      teamName: teamName,
      killPoints: killPoints,
      placePoints: placePoints,
      chickenDinner: chickenDinner,
    };
    console.log(data);
    setTableData([...tableData, data]);
  };

below is the function for sorting based on a paticular value I don't know how to sort the array named as tableData ,on button click the items should be sorted and displayed in the table

 const sortByPriceDesc = () => {
    tableData.sort((a, b) => (b.killPoints - a.killPoints))
  }



return (
    <div className='col-lg-6 p-2 mx-auto' style={{ fontFamily: 'Unica One' }}>
      <div className='col-lg-3 text-center  mx-auto'>
        <input
          name="teamName"
          onChange={handleChange}
          className="p-2 mb-3 mr-1"
          placeholder="Team Name"
          value={teamName}
        // ref = {teamNameRef}
        />
        <input
          name="chickenDinner"
          onChange={handleChange}
          className="p-2 mb-3 mr-1"
          placeholder="Chicken Dinner"
          value={chickenDinner}
        // ref = {chickenDinnerRef}
        />
        <input
          name="placePoints"
          type='number'
          onChange={handleChange}
          className="p-2 mb-3 mr-1"
          placeholder="Place Points"
          value={placePoints}
        // ref = {placePointsRef}
        />
        <input
          name="killPoints"
          type='number'
          onChange={handleChange}
          className="p-2 mb-3 mr-1"
          placeholder="Kill Points"
          value={killPoints}
        // ref = {killPointsRef}
        />
        <button className="btn bg-warning text-dark fs-5 text fw-bold" onClick={addData}>
          Add Row
        </button>
      </div>
      <div className='bg-dark p-2 m-2'>
        <button className="btn bg-warning text-dark fs-5 text fw-bold" onClick={sortByPriceDesc} >
          Sortit
        </button>
      </div>
      <div id="print" className='bg-dark p-2 m-2'>
        <h3 className='text-light text-center'>
          200IQ
        </h3>
        <p className='text-light text-center'>
          SEASON 1
        </p>
        <div className='fw-bolder fs-5 text col-lg-12 text-center bg-warning text-dark'>
          <p>
            QUALIFIERS DAY 1 - GROUP A
          </p>
        </div>
        <div className='col-lg-12 row bg-dark border-warning border m-1'>
          <div className='fw-normal fs-6 text col-lg-1 text-center  text-light bg-warning text-dark'>S.No</div> <br></br>
          <div className='fw-normal fs-6 text col-lg-3 text-light  text-center'>TEAM NAME</div>
          <div className='fw-normal fs-6 text col-lg-3 text-light  text-center'>CHICKEN DINNER</div>
          <div className='fw-normal fs-6 text col-lg-2 text-light text-center'>PLACE POINTS</div>
          <div className='fw-normal fs-6 text col-lg-2 text-light text-center'>KILL POINTS</div>
          <div className='fw-normal fs-6 text col-lg-1 text-light text-center text-light'>TOTAL</div>
        </div>
        {tableData.map((item, idx) => {
          return (
            <div key={idx} className='col-lg-12 row bg-dark border-warning border m-1'>
              <div className='fw-normal fs-4 text col-lg-1 text-center  text-light bg-warning text-dark'>{idx + 1}</div> <br></br>
              <div className='fw-normal fs-4 text col-lg-3 text-light  text-center'>{item.teamName}</div> <br></br>
              <div className='fw-normal fs-4 text col-lg-3 text-light  text-center'>{item.chickenDinner}</div> <br></br>
              <div className='fw-normal fs-4 text col-lg-2 text-light text-center'>{item.placePoints}</div> <br></br>
              <div className='fw-normal fs-4 text col-lg-2 text-light text-center'>{item.killPoints}</div> <br></br>
              <div className='fw-normal fs-4 text col-lg-1 text-light text-center bg-warning text-dark'>{Number(item.placePoints) + Number(item.killPoints)}</div> <br></br>
            </div>
          );
        })}

      </div>
      <div className='text-center'>
        <button type="button" className='btn bg-warning text-dark fs-5 text fw-bold' onClick={handleDownloadImage}>download</button>
      </div>
    </div>
  );
}

please help me to solve the issue .Thanks in Advance..