How to maintain css transitions in custom cell whenever data changes

[Newbie012]

Basically, I'm trying to think of a way to maintain the CSS transitions in custom cells when the data of the table is changed. I'll give you an example:

I have a table of posts. Each post has an "active" column. This column is a UI switch. When the value of the cell (boolean) is true, the switch is turned on, and when it's off, then it toggles off. Whenever I toggle on or off the switch, there's a small animation that occurs, but not in react-table and I think I know why.

I assume, that whenever the data of the table is changed, then each Cell callback is being invoked and it returns a whole new component each time. If I'm wrong (hopefully), what would be the best approach here?

TL;DR - "Why it's not working"

I have created a demo here - https://codesandbox.io/s/brave-mendeleev-lkf5d?file=/src/index.css

This is the expected outcome:

This is the actual outcome:

[chukwudobemicah]

I also have this issue, whats the fix here?

[Newbie012]

I gave up

[lerman01]

I've encountered the same issue as well. It's been 4 years and still no answer, so I guess this is a framework limitation?