Анимация срабатывает неправильно (framer-motion)?

Question

[steklovatnik]

Доброго времени суток.
Использую библиотеку framer-motion и словил неприятный мелочный баг.
При клике на стрелочку она должна разворачиваться, и наоборот, будет выпадающий список в будущем. Один раз она разворачивается плавно, а второй - мгновенно, если брать значение isOpen просто из самодельного state, то все работает.
А сейчас получаю данные из хранилища редакса в родителя и передаю в качестве пропсов, в самом компоненте при клике отправляю измененное состояние.
Как починить?

import { useDispatch, useSelector } from "react-redux";
import React, { useState } from "react";
import { motion } from "framer-motion";

import s from "./listItem.module.css";
import DragIcon from "./DragIcon";

export default function ListItem({ item }) {
  const dispatch = useDispatch();

  const { title, content, index, isChecked, isOpen } = item;


  const arrowVariants = {
    open: { rotate: 0 },
    closed: { rotate: 180 },
  };



  function handler() {
    return dispatch({ type: "IS_OPEN", payload: index });
  }

  return (
    <div className={s.item}>
      <div >
        <div className={`${s.title}    `}>
    
          <motion.div
            onClick={handler}
            variants={arrowVariants}
            animate={isOpen ? "open" : "closed"}
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              border: "12px solid transparent",
              borderTop: "12px solid rgba(190, 189, 189, 0.493)",
              width: "12px",
              cursor: "pointer",
            }}
            transition={{ duration: 0.2 }}
          ></motion.div>
        </div>
        <div className={s.text}>{content}</div>
      </div>
    </div>
  );
}