Hello, I need to implement a Button in ReactJS Table, to sort the items from the table

so this is my Code :

import products from "../products_json/products.json";
import "./style.module.css";
import { useState } from "react";

const Table = () => {
  const ProductsDisplay = products.map((info) => {
    return (
      <tr>
        <td>{info.id}</td>
        <td>{info.itemName}</td>
        <td>{info.category}</td>
        <td>{info.price}</td>
        <td>{info.manufacturer}</td>
        <td>{info.productionDate}</td>
      </tr>
    );
  });


  return (
    <div>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Item Name</th>
            <th>Category</th>
            <th>Price</th>
            <th>Manufacturer</th>
            <th>Production Date</th>
          </tr>
        </thead>
        <tbody>{ProductsDisplay}</tbody>
      </table>

      <div className="wrapper">
        <button>Sort by Price</button>
        <button>Sort By manufacturer</button>
        <button>Reset</button>
      </div>
    </div>
  );
};

export default Table;

I would like to do a sorting by Manufacturer, Price & reset button (which bring back the default table).
Since Im a complete beginner yet, im not quite sure how to implement that by useState hook, or just by simply creating a function.
I have the basic ideda of how to do it – for example some kind of

function () => {
 ProductsDisplay.info.price.sort((a,b) => a-b);
}

and then add an onClick in the button, but as I said im not very familiar with the syntax and practices yet, so a hint would be of huge help.
Thanks in advance !