Nested JSON Objects in React JS - reactjs

Question

I have a API Response which has two Arrays - Incident and Services.
I have two Buttons "Incident" & "Service Req.", Once we click on each button it should get a list of Incident or Service Req with toggle or disabled MUI button functionality.
I'm trying to create two buttons - Incident & Service Req
Once we click on Incident/Service Req button we need - Inc/SR list on same Container DIV
Im trying to add MUI Disabled button or Toggle Functionality but my basic Functionality is not working.
{
"totalIncident": 20,
"totalRequests": 20,
"incidents": [
{
"createdOn": "2022-10-20 07:14:17",
"description": "This is Incident .",
"number": "REQ9XXXX"
}
],
"requests": [
{
"createdOn": "2022-10-20 07:14:17",
"description": "This is Request.",
"number": "REQ9XXXX"
}
}
]
}
import React from "react";
import "./App.css";
class API_APP extends React.Component {
constructor() {
super();
this.state = { data: [] };
}
componentDidMount() {
fetch(
"API_LINK"
)
.then((res) => {
return res.json();
})
.then((resp) => {
this.setState({ data: resp });
console.log(resp);
});
}
onClickIncidents = () => {
console.log(this.state.data.incidents);
return (
<div>
<h1>Incidents</h1>
{this.state.data.incidents?.map((item) => {
return (
<div key={item.sysId} className="part">
<li> {item.number}</li>
</div>
);
})}
</div>
);
};
render() {
console.log(this.state.data);
const incidents = this.onClickIncidents;
console.log(incidents);
return (
<div className="container">
<h1>Incidents</h1>
<button onClick={this.onClickIncidents}>incidents</button>
<button onClick={this.onClickRequests}>requests</button>
</div>
);
}
}
export default API_APP;