[Solved]-How to map over 2 Array of object in React and render to Table-Reactjs

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.