Three callback refs, two with cleanups. What does this log when you click Clicked 0, then Toggle?

import { useState } from "react";
 
function withCleanup(node) {
  console.log("A got", node.tagName);
  return () => console.log("A cleanup");
}
 
function withoutCleanup(node) {
  console.log("B got", node ? node.tagName : null);
}
 
export default function App() {
  const [open, setOpen] = useState(true);
  const [count, setCount] = useState(0);
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && (
        <div>
          <span ref={withCleanup}>A</span>
          <span ref={withoutCleanup}>B</span>
          <span
            ref={(node) => {
              console.log("C got", node.tagName);
              return () => console.log("C cleanup");
            }}
          >
            C
          </span>
        </div>
      )}
    </>
  );
}