React - Refresh cards without resetting the stopwatch

Question

I am using react-stopwatch to display the stopwatch in current calls. I am following the given pattern for components: ActiveCalls -------> ActiveCallCard ---------> StopwatchNew

Here is my working code:

ActiveCalls.js

 class activeCalls extends Component {
    
      constructor(props) {
        super(props);
      this.state = {
        callData: [],
        activeCallData:[],
      }
      this.apiService = new phoneService();
      };
    
      async componentDidMount() {
        this.getActiveCalls();
      }
    
    
      getActiveCalls() {
    
        this.setState({ isDataFetched: false }, async () => {
          
          let callData = await this.apiService.getActiveCalls();
    
          if(callData.data){
          
             this.state.activeCallData = callData.data; 
             
             this.setState({
              activeCallData: [this.state.activeCallData],
              
            })
    
          }else{
    
                this.setState({
                  activeCallData: [],
                  
                })
              }
          })
    
      }
      render() {
        
        return <ActiveCallCard cdrdata = {this.state.activeCallData}/>
      }
    
    }

2. ActiveCallCard.js

     class ActiveCallCard extends React.Component { 
              render(){
        var seconds=10
        var minutes=10
        var hours=0
        var limit=""
        var calleeData = null;
          var cdrdata1=[];
   
        const getCdrData = (cdrdataArray)=>{
          var cdrDataNew = [];
   
          const cdrdata1 = cdrdataArray[0];
          if(cdrdata1 != undefined && cdrdataArray.length > 0 ){
   
            Object.keys(cdrdata1).map(function(key,index) {
   
              var duration = cdrdata1[key].Duration.split(":");
              hours = duration[0].trim();
              hours= parseInt(hours);
              minutes = duration[1].trim();
              minutes= parseInt(minutes);
              seconds = duration[2].trim();
              seconds = parseInt(seconds);
   
            cdrDataNew.push(
              <React.Fragment key={index}>
              <Col xs="12" sm="6" lg="4" xl="3">
              <Card className = "container pb-3">
                <Row className = "align-items-center mb-3 pl-2">
                    <span className = 'mr-2'><i className="icon-clock icons font-m d-block mt-0"></i></span>
                    <span><StopwatchNew hours = {hours} minutes = {minutes} seconds = {seconds} limit="" /></span>
                </Row>
                <Row className = "">
                  <Col  xs="4" sm="4" lg="4">
                    <div className="d-flex align-items-center flex-column">
                      <div className = 'mr-2'><h4><i className="icon-user icons font-m d-block mt-0"></i></h4></div>
   
                      <h6>{`${cdrdata1[key].CallerIDNum}`}</h6>
                      <div title = {`${cdrdata1[key].CallerIDName}`} className = "text-truncate text-center w-100">{`${cdrdata1[key].CallerIDName}`}</div>
                    </div>
                  </Col>
                  <Col xs="4" sm="4" lg="4">
                    <div className="d-flex align-items-center flex-column">
                      <div className = 'mr-2'><h4><Loader type="ThreeDots" color="#00BFFF" height={50} width={50} /></h4></div>
                      <h6></h6>
                    </div>
                  </Col>
                  <Col xs="4" sm="4" lg="4">
                    <div className="d-flex align-items-center flex-column">
                      <div className = 'mr-2'><h4><i className="icon-user icons font-m d-block mt-0"></i></h4></div>
                      <h6>{`${cdrdata1[key].ConnectedLineNum}`}</h6>
                      <div title = {`${cdrdata1[key].ConnectedLineName}`} className = "text-truncate text-center w-100">{`${cdrdata1[key].ConnectedLineName}`}</div>
                    </div>
                  </Col>
                </Row>
   
              </Card>
              </Col>
              </React.Fragment>
              )
          })
        }
        return cdrDataNew;
        }
   
   
          if(this.props.cdrdata!=null && this.props.cdrdata!=undefined && this.props.cdrdata.length > 0){  
            var cdrdata1 = Object.values(this.props.cdrdata);
   
          }
   
   
      return (
      <React.Fragment>
      <div className="animated fadeIn">
      <FormGroup className="m-0 mb-2 col-md-12">
   
   
     <Row> 
        <Col xs="12" sm="12" lg="12">  
          <Row>  
          {
            getCdrData(cdrdata1)
          }
          </Row>
        </Col>
      </Row>
      </FormGroup>
      </div>
      </React.Fragment>
            );
          }
        }
   

3. StopwatchNew.js

    class StopwatchNew extends Component {
   
    render () {
   
          return (
   
      <ReactStopwatch
        hours={this.props.hours}
        minutes={this.props.minutes}
        seconds={this.props.seconds}
   
        limit=""
   
        render={({ formatted, hours, minutes, seconds }) => {
          return (
            <div>
               {formatted}    
            </div>
          );
        }}
       />
    );
        }
    }
   
    export default StopwatchNew;
   

Here is output:

The stopwatch for all cards works fine until cards are not refreshed. However if I refresh the cards every 5 seconds the stopwatch also gets reset. After adding following code In ActiveCalls.js to refresh cards every 5 seconds:

  async componentDidMount() {
    this.getActiveCalls();
    this.intervalID = setInterval(this.getActiveCalls.bind(this), 5000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

Output is:

Stopwatch keeps on resetting every 5 seconds.

I want to refresh the cards every 5 seconds without resetting the stopwatch time.

How can I achieve that in React ? What changes needs to be done ? Thanks in advance.