displaying data in material ui table from api using fetch api - reactjs

Question

I can't convert the api data into raw data on table. the data I can display on my console but don't know how to get it on the table.
here is my code for fetching dummy api data:-
const paginationTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((res) => {
// console.log(res);
setData(res);
});
}, []);
console.log(data);
// data.map((item) => {
// console.log(item.id);
// });
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const columns = [
{
title: "ID",
field: data.id,
editable: false,
headerStyle: {
color: "white",
backgroundColor: "hwb(12deg 0% 0% / 86%)",
},
},
{
title: "Station Name",
field: data.address.street,
headerStyle: {
color: "white",
backgroundColor: "hwb(12deg 0% 0% / 86%)",
},
},
{
title: "Location",
field: data.address.city,
headerStyle: {
color: "white",
backgroundColor: "hwb(12deg 0% 0% / 86%)",
},
},
{
title: "Status",
field: data.website,
headerStyle: {
color: "white",
backgroundColor: "hwb(12deg 0% 0% / 86%)",
},
},
];
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<>
{/* <APIdata/> */}
<Paper sx={{ width: "100%" }}>
<TableContainer sx={{ maxHeight: 440 }}>
<Table>
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.title}
align={column.align}
style={{ top: 57, minWidth: column.minWidth }}
sx={{ fontSize: "1rem" }}
>
{column.title}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, i) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={i}>
{/* updated
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
*/}
{columns.map((column) => {
const value = column.title;
// console.log(value);
return (
<>
<TableCell key={column} align={column.align}>
{column.format && typeof value === "number"
? column.format(value)
: value}
</TableCell>
</>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
component="div"
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</>
);
};
export default paginationTable;
the data fetched from api is something like this:-
currently I'm getting a blank web page.If i replace field values with
field: data.address instead of data.address.city and data.address.street it gives me table with headings only.. like this
I tried using "material-table" and through that I was able to get the data on the table but I've to add a view button over there in each row so I'm using material-ui table for that so that I can use material-icons