How to map over 2 Array of object in React and render to Table

Question

how can i map over 2 Array of object in React and render to one Table. what are option for this issue. should i merge these two array into one ? Please check Json Data

let URL1 = "http://api_url/users"
let URL2 = "http://api_url/users-card"

const promise1 = axios.post(URL1, inputValue , {headers: {'Content-Type': 'text/plain'}});
const promise2 = axios.post(URL2, inputValue , {headers: {'Content-Type': 'text/plain'}});

Promise.all([promise1, promise2]).then(function(values) {
  setDataSetOne(values[0]);
 setDataSetTwo(values[1]);
});

 <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
         <TableBody>

             <TableCell>DataOne</TableCell>
              <TableCell>DataOne</TableCell>
              <TableCell>DataTwo</TableCell>

       </TableBody>
      </Table>
    </TableContainer>

Json Data 1st

[{
    "name": "adnan hassan",
    "count": 6960
}, {
    "name": "adnan",
    "count": 69666660
}]

2nd Json Data

[{
    "keyword_idea_metrics": {
        "competition": "LOW",
        "avg_monthly_searches": "6600",
        "competition_index": "22",
        "low_top_of_page_bid_micros": "53135896",
        "high_top_of_page_bid_micros": "278963954"
    },
    "keyword_annotations": {
        "concepts": []
    },
    "text": "dubai homes",
    "_text": "text"
}]

Edit: Json Data has been added

Answer 1

You can use one object to contain two states like this:

import { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  // use one object to contain two states
  const [data, setData] = useState({ dataOne: '', dataTow: '' });
  // fetch data
  useEffect(() => {
    const fetchData = async () => {
      const dataOne = await axios.post(URL1, inputValue, {
        headers: { 'Content-Type': 'text/plain' },
      });
      const dataTow = await axios.post(URL2, inputValue, {
        headers: { 'Content-Type': 'text/plain' },
      });
      setData({ dataOne, dataTow });
    };
    fetchData();
  }, []);
  // display data
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableCell>{data.dataOne}</TableCell>
          <TableCell>{data.dataTow}</TableCell>
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default App;

I hope it helpful.