I want to sort the data according to the popularity that is given in the obj

But this is not sorting the obj

I'm using API is data,data.products

import "./styles.css";
import React, { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
     axios
     .get("https://mindler-dashboard.s3.us-east-2.amazonaws.com/products.json")
     .then((res) => {
     console.log(res.data);
     setData(res.data);
     });
  }, []);

 return (
<div className="App">
  {data.products &&
    Object.keys(data.products)
      .sort((a, b) => b.popularity - a.popularity)
      .map((key) => {
        return (
          <div>
            <h3>{data.products[key].title}</h3>
            <h5>{data.products[key].price}</h5>
            <h5>{data.products[key].popularity}</h5>
          </div>
        );
      })}
</div>
);
}