[BUG] layoutId and AnimatePresence together fail to unmount content

[onnlucky]

import * as React from "react";
import { createRoot } from "react-dom/client";
import { AnimatePresence, motion } from "framer-motion";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const animation = {
  x: 0, // Comment this out and it works.
  opacity: 0.5
};

export const Screen = function Component() {
  const [visible, setVisible] = React.useState(false);
  return (
    <>
      <motion.div
        className={"button"}
        onTap={() => setVisible(!visible)}
        style={{ width: 100, height: 100, background: "green" }}
      />
      <AnimatePresence>
        {visible && (
          <motion.div
            layoutId={"An2J7Niah"} // Comment this out and it works.
            style={{ width: 100, height: 100, background: "blue" }}
            className={"BLUE"}
            exit={animation}
          />
        )}
      </AnimatePresence>
    </>
  );
};

root.render(<Screen />);

With the above code (code sandbox: https://codesandbox.io/s/aged-leaf-1tlyr2?file=/src/index.tsx ), click the green square, will show a blue square, click it again, it should disappear after an exit animation. But instead it will never go away.

This is a regression in 10.12.8. And one way to fix it is to change create-projection-node.ts use of the queueMicrotask, like this:

        didUpdate() {
            if (!this.updateScheduled) {
                this.updateScheduled = true
                // queueMicrotask(() => this.update())
                this.update()
            }
        }

[onnlucky]

This seems related to: #2145 and #2110