Expanding one row updating the value of all the expanded rows with the latest value

[sivabankapalli]

I have a requirement to call the API to retrieve the value and show value when the expand row is selected. Each row is having a different value which is received by using an API. For example:
There are ten rows displayed on the dashboard with expanding row indicator (individual as well as expand all). If row one is expanded then there will be an API call to retrieve the data and show it under the expanded row. If the second row expanded then there will be another API call to retrieve the data that belongs to the second row and show the same without impacting the first-row data.
I am facing an issue where all the expanded rows are updated with the latest expanded row data which is received from the latest row API call. As part of the issue investigation, I observed that render is called for all the expanded rows instead of the current expanded row.

Note: I am using sagas for API calls. And used the component to retrieve the data from API and store it in the props, show the data in the expanded row.

Can you please help me with how to fix the issue?

Here is the code snippet:

<BootstrapTable
{...props.baseProps}
bootstrap4
pagination={ paginationFactory() }
defaultSorted={ defaultSorted }
filter={ filterFactory() }
loading={ props.loading }
expandRow={ expandRow }
headerClasses="header-class"
noDataIndication="There are currently no active or historic requests."
striped
hover
condensed
/>

const expandRow = {
className: 'expanding-row',
parentClassName: 'expanding-parent-row',
onlyOneExpanding: false,
showExpandColumn: true,
expandByColumnOnly: true,
renderer: row => (
<-Container>
<-Row>
<-Col>
<-NewRecordContent Id={row.Id}/>
<-/Col>
<-/Row>
<-/Container>
)
};

--> NewRecordContent component:
import React from 'react';
import moment from 'moment'
import {getJobRequestedDate} from "../actions/jobRequestedDatetActions";
import { connect } from "react-redux";

type Props = any;
class JobRequestedDate extends React.Component {
constructor(props) { super(props); }

componentDidMount() {      this.props.getJobRequestedDate(this.props.Id) 	}

componentWillUnmount() {
    this.setState(
        {
            requestedDate: []
        },
        () => {}
      );
  }

render() {
    let jobRequestedAt = this.props.job.report.lastJobRequestAt        
    return (
        <>
            <p>Job Requested at: <b><strong>{jobRequestedAt !== undefined ? moment(jobRequestedAt).format("Do MMM YYYY, HH:mm") : ""} </strong></b></p>
        </>
)
}

}

const mapStateToProps = state => ({
job: state.report
});

const mapDispatchToProps = dispatch => {
return {
getLocationReport: (Id) => dispatch(getJobReport(Id)),
}
}

export default connect(mapStateToProps, mapDispatchToProps)(JobRequestedDate);