Timers stop or freeze after multiple refreshing data

[NathanR1225]

I have a bit of a complicated setup.

I am pulling data from a database and displaying it in a react-table. One of the columns has a timer based on the data on each row. This all works fine and counts down with out issue most of the time. The table is set to re-fetch and re-render the table every 45 seconds.

I run into two different instances of this issue.

1. Some times the timer loads in some rows will start to count down and some will be frozen. In those cases when the data refreshes the times that were working continue to work while the ones that do not work move forward 45 seconds but still do not move till the data refreshes again.
2. Timers will work as intended but after 10 or so refreshes (I have not been able to keep count so a guess) most if not all timers will stop working and only move forward on a data refresh. The 3 of the times I ran across it all of the stopped ones read 34 seconds left.

I currently have 25 rows on the table.

column in the react table. { Header:"Timer", id:"timer", filterable: false, accessor: data =>{ console.log(data); if (data.dueDate !== null) { const date = new Date(data.dueDate) return <Countdown date={date} /> }else{ sendError({ content:due date not found for , ${JSON.stringify(data)}, ${ENVIRONMENT}, }) return "No due date found" } }, width: 120, style: { paddingLeft: '0.5rem', borderRight: '1px solid black'}, },

[NathanR1225]

Writing my own. So I am just going to close this issue.