How should I traverse the object to create jsx using the form of the object as shown below?

Question

I want to create the HTML syntax below. How do I make an element corresponding to the title with the key of the object, and make a list of details while traversing the array to value?

{
  products: {
    "women": [
      {
        "id": 1,
        "name": "miho",
        "image": "../../thumbs/miho.jpg"
      },
      {
        "id": 2,
        "name": "gaga",
        "image": "../../thumbs/gaga.jpg",
      }
    ],
    "men": [
        {
          "id": 1,
          "name": "teatea",
          "image": "../../thumbs//teatea.jpg"
        }
    ]
  }
}

<div>
  <div className="keyOfObject">women<div>
  <div className="products-list">
      <div className="product">
        <div className="image" style={{background: url(../../thumbs/miho.jpg)}}/>
        <div className="name">miho<div>
      </div>
      <div className="product">
        <div className="image" style={{background: url(../../thumbs/gaga.jpg)}}/>
        <div className="name">gaga<div>
    </div>
  </div>
<div className="keyOfObject">men<div>
  <div className="products-list">
      <div className="product">
        <div className="image" style={{background: url(../../thumbs/teatea.jpg)}}/>
        <div className="name">teatea<div>
      </div>
  </div>
</div>

Answer 1

Something like this:

export function Component(data) {
  return (
    <div>
      {Object.entries(data).map(([key, productsList]) => {
        return (
          <>
            <div key={`${key}-keyOfObject`} className="keyOfObject">
              {key}
            </div>
            <div key={`${key}-productsList`} className="products-list">
              {productsList.map((product) => {
                return (
                  <div className="product" key={product.id}>
                    <div className="image" style={`background: url(${product.image})`}></div>
                    <div className="name">{product.name}</div>
                  </div>
                );
              })}
            </div>
          </>
        );
      })}
    </div>
  );
}

But it will be better if you will have a parent div for keyOfObject and productsList divs