I’m confused by this excerpt from the official react documentation:

Manually wrapping JSX nodes into useMemo is not convenient. For example, you can’t do this conditionally.

Ref: https://react.dev/reference/react/useMemo#memoizing-individual-jsx-nodes.

What does it mean by “you can’t do this conditionally”? It seems conditionally rendering a JSX node works fine in this example:

import { useMemo, useState } from 'react';
import './App.css';

function Block({ color }) {
  return (
    <div style={{ backgroundColor: color, width: 100, height: 100 }}></div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const block = useMemo(() => {
    if (count % 2 === 0) {
      return <Block color="red" />;
    } else {
      return <Block color="white" />;
    }
  }, [count]);

  return (
    <>
      {block}
      <button onClick={() => setCount((c) => c + 1)}></button>
    </>
  );
}

export default App;

Am I missing something?