sort data by filters, react js

I have created a card where it shows me data that has been passed to me, but I have to sort them with several different filters using buttons, the order would be from highest to lowest and from lowest to highest

const menu = (
  <Menu>
    <Menu.Item key="1" icon={<UserOutlined />}>
      24 hours
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      48 hours
    </Menu.Item>
    <Menu.Item key="3" icon={<UserOutlined />}>
      72 hours
    </Menu.Item>
  </Menu>
);

function Menutop(props) {
  const [percent, setPercen] = useState(0);

  useEffect(() => {
    if (percent === 100) {
      setTimeout(() => {
        props.showTiendas(true);
      }, 1000);
    } else {
      props.showTiendas(false);
    }
  }, [percent, props]);

  return (
    <>
      <Progress value={percent} onUpdate={setPercen} duration={16} />
      <div className="flex items-center bg-dark-04 px-4 py-3">
        <div className="flex w-3/12">
          Name
          <BsArrowUpDown className="text-base ml-2" />
        </div>
        <div className="flex w-1/6 justify-center items-center">
          capacity
          <BsArrowUpDown className="text-base ml-2" />
        </div>
        <div className="card flex w-1/12 justify-center items-center">
          <Dropdown overlay={menu}>
            <Button>
              Capacity alert <DownOutlined />
            </Button>
          </Dropdown>
        </div>
        <div className="flex w-1/6 justify-center items-center">
          visitor
          <BsArrowUpDown className="text-base ml-2" />
        </div>
        <div className="flex w-1/6 justify-center items-center">
          Distancing alert
          <BsArrowUpDown className="text-base ml-2" />
        </div>
        <div className="flex w-1/6 justify-center items-center ">
          Capacity alert
          <BsArrowUpDown className="text-base ml-2" />
        </div>
        <div className="flex h-3  w-1/6"></div>
        <div
          onClick={() => {
            setPercen(0);
          }}
          className="w-1/12 flex justify-center items-center cursor-pointer bg-yellow"
        >
          <BsArrowRepeat className=" font-bold text-2xl" />
        </div>
      </div>
    </>
  );
}

export default Menutop;

The filters would be the ones I have put, name, capacity, Capacity alert, visitor, Distancing alert and Capacity alert, the only one that would change from smallest to largest would be name that would be in alphabetical order, I still have a button that would be ordered by hour that neither I know how to do it

this is where i show my data:

function Card(props) {
  const [open, setOpen] = useState(false);
  const trigger = useRef(null);


  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }

  return (
    <div>
    <div className="w-full flex justify-center px-4 py-3">
      <div className="flex w-3/12 px-2 items-center">
        <div className="w-24 p-2 bg-dark-04 mr-4 rounded">
          <img src={props.store_logo} className="" alt="" />
        </div>
        <div className="flex flex-col justify-center ">
          <p className="font-semibold my-0">{props.store_name} </p>
          <p className="text-xs my-0">{props.store_address} </p>
        </div>
      </div>
      <div className="flex w-1/6 justify-center items-center px-2">
        <div className="w-4/5 h-10 bg-green bg-green-700 rounded text-white font-bold flex justify-center items-center">
          <p className="my-0 text-lg">{props.occupancy.occupancy}/{props.occupancy.capacity}</p>
          <p className="ml-2 my-0">{props.occupancy.percentage}%</p>
        </div>
      </div>
      <div className="flex w-1/12 justify-center">
        <Chart />
      </div>
      <div className="flex  w-1/6 justify-center items-center font-semibold">
        <p className="my-0 text-lg">{props.visits}</p>
      </div>
      <div className="flex justify-center items-center font-semibold w-1/6">
        <p className="my-0 text-lg">{props.alerts.conglomerations} Alertas</p>
      </div>
      <div className="flex justify-center items-center font-semibold w-1/6 ">
        <p className="my-0 text-lg">{props.alerts.occupancy} Alertas</p>
      </div>
      <div className="card flex justify-center items-center w-1/6">
        <Button className="mr-3">Analytics</Button>
        <Button>Alerts</Button>
      </div>
      <div className="w-1/12 flex justify-center items-center">
        <span
          ref={trigger}
          onClick={toggleOpen}
          className=" w-4/12 flex justify-center items-center"
        >
          <BsChevronUp className=" text-2xl" />
        </span>
      </div>
    </div>
    <Info open={open} {...props} />
    </div>
  );
}

export default Card;

where I show my data is a component where I send it to call

this would be the data:

[
{
    "name": "Samantha White",
    "id": "484567489sda",
    "address": "4116 Barton Creek Boulevard Austin, TX 78735 USA",
    "logo": "https://sssssss.s3.amazonaws.com/ssss/express.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2721
  },
  {
    "name": "Jacqueline Wells",
    "id": "sdasdx45616a4dsa5",
    "address": "s15035 Highview Road Grand Junction, CO 81504 USA",
    "store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2069
  }
]