react transition effect not work after async thunk

Although I have updated the todo status, the checkbox effect is not working correctly, as if no effect has been applied, what could be the reason for this? I don't think there is a problem with the api file, but the api request is taking a long time.I think it's because css doesn't render again, I can't think of anything else..

Thank you for helping

 import React from "react";
import { useDispatch } from "react-redux";
import { toggleTodos } from "../redux/slice/thunkActions";
import styled from "styled-components";
const Content = styled.div`
  color: #fff;
  text-transform: capitalize;
`;
const Options = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
`;
const EditButton = styled.button`
  cursor: pointer;
  background-color: #ff6b81;
  padding: 0.7rem 2rem;
  color: #fff;
  border-radius: 0.5rem;
  font-weight: bold;
`;
const InputWrapper = styled.label`
  position: relative;
`;
const Input = styled.input`
  position: absolute;
  left: -99999px;
  top: -99999px;
  &:checked + span {
    background-color: #1890ff;
    transition: 1s;
    &:before  {
      left: calc(100% - 0.2rem);
      transform: translateX(-100%);
    }
   
  }
`;
const Slider = styled.span`
  display: flex;
  width: 5rem;
  height: 2.5rem;
  cursor: pointer;
  border-radius: 10rem;
  background-color: #fcebb6;
  transition: background-color 0.4s;
  &:before {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 2.1rem;
    transition: 1s;
    background-color: #fff;
  }
`;
const Todo = ({ todo }) => {
  const dispatch = useDispatch();
  const handleChange = (todo) => {
    dispatch(toggleTodos(todo));
  };

  return (
    <li>
      <Content>{todo.content}</Content>
      <Options>
        <EditButton type="button">Edit</EditButton>
        <InputWrapper htmlFor={`todoContent${todo.id}`}>
          <Input
            id={`todoContent${todo.id}`}
            type={"checkbox"}
            onChange={() => handleChange(todo)}
            checked={todo && todo.isCompleted}
          />
          <Slider />
        </InputWrapper>
      </Options>
    </li>
  );
};

export default Todo;