Framer Motion中Flexbox使用justify-content: space-around或gap导致布局动画失效的问题求助

大家好，我最近在做React项目时，遇到了Framer Motion配合Flexbox的动画问题，想请教下各位：

当Flexbox容器使用gap或者justify-content（比如space-around）这类属性时，移除其中一个元素后，元素周围的空白空间会瞬间消失，导致剩下的元素直接跳到新位置——哪怕我已经给这些元素加上了layout属性来触发布局动画，也完全没有平滑的过渡效果。

预期行为 #

我希望中间元素被移除后，左右两个元素能平滑过渡到它们的新位置，而不是瞬间跳转。

下面是复现问题的代码：

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <motion.div
      id="container"
      style={{
        display: "flex",
        justifyContent: "space-around",
        gap: "20px",
        width: "100%",
        height: "200px",
        backgroundColor: "#f0f0f0",
        alignItems: "center"
      }}
    >
      <motion.div
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "blue",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white"
        }}
        layout
      >
        元素1
      </motion.div>
      <AnimatePresence>
        {show && (
          <motion.div
            onClick={() => setShow(false)}
            initial={{ opacity: 1, width: 100 }}
            exit={{ opacity: 0, width: 0 }}
            style={{
              width: "100px",
              height: "100px",
              backgroundColor: "red",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "white",
              cursor: "pointer"
            }}
            layout
          >
            点击隐藏
          </motion.div>
        )}
      </AnimatePresence>
      <motion.div
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "green",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white"
        }}
        layout
      >
        元素3
      </motion.div>
    </motion.div>
  );
}

点击红色的“点击隐藏”元素后，就能看到左右元素瞬间移动的问题，完全没有过渡动画。有没有大佬知道怎么解决这个问题呀？

备注：内容来源于stack exchange，提问作者Unlucky