how do I Consume REST API dynamically through component? - reactjs

Question

I am trying to refactor my component where it takes the data from a remote server as you can see below the mock API response. how can I restructure my component to fully depend on the API response, and fill the component based on their attributes where _name is my heading, and "data"` is our body data to fill the rest table alike
import React, {useState,useEffect} from 'react';
import axios from 'axios';
export default function Demo () {
const [isModalOpen, setModalIsOpen] = useState(false);
const [users, setUsers] = useState([]);
const handleOnClick = async () => {
try {
const { data } = await axios.get('xxxxxxxxxxxxxxx');
setUsers(data);
// Now that the data has been fetched, open the modal
setModalIsOpen(true);
} catch (err) {
console.error("failed", err);
}
};
return (
<div className="container">
<>
{keys.map((key) => (
<div className="col" key={key}>
<div className="row">{key}</div>
{arr[0][key].map((item) => (
<div className="row" key={item._id} onClick={() => handleOnClick(item)}>{item._name}</div>
))}
</div>
))}
</>
{isModalOpen && <Modal onRequestClose={() => setModalIsOpen(false)} data={users}/>}
</div>
);
}
API Response
{
"count":39,
"next":null,
"previous":null,
"results":[
{
"_name":"Collection",
"data":[
{
"_id":"T1560",
"_name":"Archive Data",
"tags":[
"Collection"
],
"subtitle":[
{
"subtitle_id":"T1560.001",
"subtitle_name":"Archive Utility",
"queries":[
],
}
],
"queries":[
],
}
]
}
}