how do I fix my code in order to display one table?

I am trying to render my dynamic JSON , but I am getting a table per result when it should be rendered in the same table.. what’s happening this? my dummy array is a model from my backend api

const arr = [
  {
      "Demo": [
          {
              "_id": "T08210",
              "name": "tilehaha",
              "tags": [
                  "Demo"
              ],
              "queries": [],
              "urls": [],
              "max_leght": [],
              "count_items": []
          },
      ],
    }
  ];

export default function Demo() {
  return (
    <div>
  {arr.map(obj =>
    Object.entries(obj).map(([key, value]) => (
        <table class="table">
        <thead>
          <tr key={key}>
            <th scope="col">{key}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
        </tbody>
      </table>
    )))}
</div>
  );
}

I need to place in the blue section as heading 2671161009, and 2671161249 , and their child items as the following