My css animation works well only the first time, but when I inspect it, works well. Using Nextjs and pure CSS

Question

I'm trying to build a react component using details, summary. But I've facing a lot of troubles with the open animation. I can't set a max-height because of the height of details can variate, so to fix that I make a div component with a overflow hidden that stores another div which is the text inside of details. My idea is like slide down smoothly. The problem is that works only the first time but when I close details and open it again the animation don't show up.

When I inspect the div of text and open/close again the animation shows up. I have inspected the dev-tools but still I can't find the problem.

import styles from "./TaskList.module.css"
import CustomCheckbox from "./CustomCheckbox";

const TaskList = ({ summary, children }) => {
  return (
    <details
      className={styles.taskList}
    >
      <summary className={styles.taskListSummary} >
        <CustomCheckbox className={styles.taskListActionCheck}/>
        <div>{summary}</div>
      </summary>
      <div style={{
        overflow: "hidden",
      }}>
        <div className={styles.taskListContent}>
          {children}
        </div>
      </div>
    </details>
  )
}

export default TaskList;

/* all box */
.taskList {
    position: relative;

    width: 90%;
    margin-bottom: .5rem;
    overflow: hidden;

    text-align: left;
    font-size: 18px;
    font-family: sans-serif;

    border-radius: 20px;

    transition: all 200ms;

}

/* Tittle */
.taskListSummary {
    /* Display */
    display: flex;
    align-items: center;

    /* text */
    font-size: 18px;
    color: #000000;

    /* visual properties */
    background-color: #ADC4CE;
    z-index: 9999;

    /* pointer */
    user-select: none;
    cursor: pointer;


    /* box model */
    padding-block: .6rem;
    padding-inline: 1.5rem;
    border-radius: 20px 20px 0px 0px ;

    transition: all 200ms;
}

/* Arrow */
.taskListSummary::before{
    position: absolute;
    content: '';

    right: .3rem;

    border: 10px solid;
    border-color: transparent transparent transparent #ffC4CE;

    transition: all 200ms;
}

/* Content */
.taskListContent {
    /* text */
    font-size: 18px;
    color: #000000;

    /* visual properties */
    background-color: #FFA0CE;

    /* pointer */
    user-select: none;
    cursor: pointer;

    /* box model */
    padding-block: .5rem;
    padding-inline: 1.5rem;
    border-radius: 0px 0px 20px 20px ;
}


/* Buttons */
.taskListSummary > [role="button"] {
    /* box model */
    position: absolute;
}

/* Custom Checkbox */
.taskListSummary > [role="button"]:first-child {
    /* box model */
    height: 20px;
    width: 20px;
    left: .6rem;

}

/* Text */
.taskListSummary > div {
    /* background-color: red; */
    margin-left: 1rem;
    width: 90%;
}

/* Delete Bottom */
.taskListSummary > [role="button"]:last-child {
    /* box model */
    right: .3rem;
}


/* Display */
.taskListSummary {
    /* box model */
    border-radius: 20px;
}

.taskList[open] > .taskListSummary {
    /* box model */
    border-radius: 20px 20px 0px 0px ;
}


/* Animations */

.taskList[open] > .taskListSummary::before {
    transform: rotate(90deg) translate(.2rem, .3rem);
}


.taskList[open] .taskListContent{
    animation: slideDown 200ms linear 33ms forwards;
}


@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>