i'm new to react, I want to make a countdown clock and flipping animation and problem is the display is not what i expected here is the react code:

useEffect(()=>{setTimeout(()=>{
  setSecond(sec==0?59:sec-1);
  if(sec==0){
    setMinute(minute==0?59:minute-1);
    if(minute==0){
      setHour(hour==0?23:hour-1);
      if(hour==0)
      setDay(day-1);
    }
   checkAnimation(!animation)
  }
},1000);
  },[sec]);



 <div className="time-countdown">
            {
              time.map((value,key)=>{
                return(
                  <div value-before={value<=0?0:value-1} value-after={value} key={key} className={`count-down `}>
                    <div className={`face ${animation?"":"flip"}`}>
                      <div className="front-face">{value<=0?0:value-1}</div>
                      <div className="back-face">{value}</div>
                    </div>
                    
                  </div>

                  );
              })
            }

`

and here is the css

.time-countdown{
  display: flex;
  flex-flow:row wrap;
  justify-content: space-around;
  width: 90%;
}
.count-down{
  position: relative;
  width: 65px;
  height: 60px;
  font-size: 45px;
  box-shadow: 5px 5px 10px black;
  border-radius: 10px;
  margin: 0 5px;
  z-index: 0;
}
.count-down::after,.count-down::before{
  display: flex;
  position: absolute;
  overflow: hidden;
  width:100%;
  height:50%;
  justify-content: center;
  overflow: hidden;
}
.count-down::before{
  content: attr(value-after);
  bottom:0;
  align-items: flex-end;
}
.count-down::after{
  content:attr(value-before);
  top : 0;
  align-items: flex-start;
  
}
.face{
  position: relative;
  width: 100%;
  height: 50%;
  z-index: 1;
  transform-origin: bottom;
  transform-style: preserve-3d;
}
.flip{


   animation-name:animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}
.front-face,.back-face{
  position: absolute;
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}
.front-face{
  align-items:flex-end ;
  transform: rotateX(-180deg) ;
}
.back-face{
  align-items:flex-start ;
}
.front-face,.count-down::before,.count-down::after{
  background-color: var(--darkblue);
}

It seems that the timming always ahead the flipping animation because there is a short delay between trasition,as the result, the transition executes every 2 second,i want it to execute same time,any ideas ?