Not able to retrieve new time range when graph panel is zoomed

I have embedded a graph panel in my React App. Initially I am passing time as URL variable.

But when user zoom the panel time range get updated and display information for new time range. Is there a way we could get and display new time range every time when time range gets updated by zoon in and zoom out?

 <div>Showing for time range {startDate} to {endDate}</div>
  <div className="col-10 p-0 embed-responsive ">
         <iframe src={`http:${domain}/${dashboardName}orgId=${orgID}&from=${props.startDate}&to=${props.endDate}&panelId=${panelID1}`}frameBorder="0"></iframe>
   </div>

How do I update startDate and endDate with new time range?