Countdown Flip cards with React / styled-components / date-fns

I think the most difficult part of this project is how to restart the animation with react. At the beginning, I tried to just use styled-components to style elements. However, I found that it is difficult to make the element restart its animation whenever it render. To solve this problem, I create a css file such that I can restart the animation by changing the class. Another problem is that it looks terrible on real phone, but it looks good on dev tool. I don't know why.