Css 为什么删除 AnimatePresence framer.div 时会出现轻微卡顿

我正试图在Reaction中创建一个手风琴组件，使"Content"部分的打开和关闭流畅，以扩大高度.在一些在线教程的帮助下，我编写了下面的代码，一切似乎都运行得很好，但当内容div上的"关闭"过渡结束时，出现了明显的卡顿.它会平稳地打开，但再次单击会导致它以90%的速度平稳关闭，然后它会捕捉到关闭状态.为什么会这样，我该如何修复呢？

我想看看Layout属性是否有帮助，但在我的Accordion组件上设置它并没有改变任何行为.我想这可能与此有关，因为我是在为高度设置动画.我也不确定Height:Auto是否阻碍了动画的流畅.这个组件正用于一个Astro项目，带有client: loadprops .

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Arrow from "/FAQ_Arrow.svg"; // a chevron

export default function Accordion({ header, text }) {
  const [isOpen, toggleOpen] = useState(false);
  return (
    <div className="w-full border-2 border-gray-700 rounded-t-md rounded-md py-4 px-8 bg-white text-black">
      <button
        className="flex justify-between items-center w-full"
        onClick={() => toggleOpen(!isOpen)}
      >
        <h1 className="text-large md:text-2xl font-bold text-[#6130C9]">{header}</h1>
        <img
          src={Arrow}
          alt=""
          className={`transition-all duration-300 ${
            isOpen ? "-rotate-180" : ""
          }`}
        />
      </button>

      {/* Expanded text */}
      <AnimatePresence mode="sync">
        {isOpen && (
          <motion.div
            initial={{ height: 0 }}
            animate={{ height: "fit-content" }}
            exit={{ height: 0 }}
            transition={{duration: 0.3, type: "spring"}}
            className="text-base mt-4 overflow-hidden"
          >
            <h3>{text}</h3>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

我还做了一个基本的Astro代码和盒子来演示这个问题:https://codesandbox.io/p/sandbox/vigorous-breeze-d842q8