I am create a table and fetching data using axios but in the table I am not able to print the data when I check data is printing in browser but not able to print the particular data to a table format so what should be change in my code?

import { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "react-bootstrap";
import axios from "axios";
export default function App() {
  const [user, setUser] = useState([]);
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users", (req, res) => {
        res.json();
      })
      .then((data) => setUser({ ...user, data }))
      .catch((error) => console.error(error));
  });

  return (
    <div className="App">
      <h3 className="text-primary">User List</h3>
      <Table
        variant="danger"
        striped
        bordered
        hover
        className="shadow-lg text-center"
      >
        <thead>
          <tr>
            <th>id</th>
            <th>Name</th>
            <th>UserName</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {user?.data?.length > 0 &&
            user.data.map((user) => {
              return (
                <tr key={user.id}>
                  <td>{JSON.stringify(user.data["data"].id)}</td>
                  <td>{JSON.stringify(user.data["data"].name)}</td>
                  <td>{JSON.stringify(user.data["data"].username)}</td>
                  <td>{JSON.stringify(user.data["data"].email)}</td>
                </tr>
              );
            })}
        </tbody>
      </Table>
      {/* <div>{JSON.stringify(user.data["data"])}</div> */}
    </div>
  );
}

>Solution :

for example

import { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "react-bootstrap";
import axios from "axios";

export default function App() {
  const [user, setUser] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        setUser(res.data);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <div className="App">
      <h3 className="text-primary">User List</h3>
      <Table
        variant="danger"
        striped
        bordered
        hover
        className="shadow-lg text-center"
      >
        <thead>
          <tr>
            <th>id</th>
            <th>Name</th>
            <th>UserName</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {user?.length > 0 &&
            user.map((userData) => {
              return (
                <tr key={userData.id}>
                  <td>{userData.id}</td>
                  <td>{userData.name}</td>
                  <td>{userData.username}</td>
                  <td>{userData.email}</td>
                </tr>
              );
            })}
        </tbody>
      </Table>
      {/* <div>{JSON.stringify(user)}</div> */}
    </div>
  );
}