Calculate total call duration In React Component using starttime and endtime props

Question

I need to display the total time of call, the timelineData has already been getting from the props, I have tried to calculate the same using EndDate-StartDate but this logic does not seem to be correct.

import React from 'react'
import { Timeline, Typography, Col, Row } from 'antd'
import { connect } from 'react-redux'

const { Text } = Typography

export class DispositionTimeline extends React.Component {
  render() {
    return (
      <Row className="dispopage">
        <Col span={24}>
          <Row>
            <Col className="timeLineItem" span={24}>
              <Row color="transparent">
                <Col span={14}></Col>
                <Col
                  style={{
                    paddingLeft: '8px',
                    fontWeight: '500'
                  }}
                  span={5}
                >
                  Start Time
                </Col>
                <Col
                  style={{
                    paddingLeft: '8px',
                    fontWeight: '500'
                  }}
                  span={5}
                >
                  End Time
                </Col>
              </Row>
              <br />
              <Timeline>
                {this.props?.timeLineData?.map((value, index) => {
                  return (
                    <Timeline.Item>
                      <Col
                        className="timelineLabel"
                        span={14}
                        style={{
                          paddingRight: '16px'
                        }}
                      >
                        {value.name}
                      </Col>
                      <Col span={5}>
                        {/* {value.startTime} */}
                        {value.name !== 'End Call' && value.startTime}
                      </Col>
                      <Col span={5}>
                        {value.name === 'End Call' && value.startTime}
                        {value.endTime ? `  ${value.endTime}` : ''}
                      </Col>
                    </Timeline.Item>
                  )
                })}
              </Timeline>
            </Col>
          </Row>

          <Row>
            {this.props?.secondAgent?.anotherAgent === 'Primary Agent' ? (
              <>
                <Col className="timeLineEnd" span={18}>
                  <Text>Total Call Duration</Text>
                </Col>
                <Col className="timeLineEnd timeLineEndRight" span={6}>
                  <Text> {[...this.props?.timeLineData].pop()?.startTime}</Text>
                </Col>
              </>
            ) : (
              ''
            )}
          </Row>
        </Col>
      </Row>
    )
  }
}

export const mapStateToProps = (state, ownProps) => {
  return {
    timeLineData: ownProps?.timeLineData ? ownProps.timeLineData : state.timeLineData?.timeLineData,
    totalDuration: state?.timeLineData?.payload,
    secondAgent: state?.secondAgent?.secondAgent
  }
}

export default connect(mapStateToProps, null)(DispositionTimeline)

The expression {[...this.props?.timeLineData].pop()?.startTime} is only displaying the startTime of Call. but I want to show the total time, I,e difference between end time and start time