Why does this memoised component passed as a prop remounts on every update?

Question

sandbox here: https://codesandbox.io/s/heuristic-cache-rigddu

Basically I pass down a react function component and call it with certain props, one of which is a memoized function. Everytime it get's updated the passed component remounts, which breakes all transitions and animations.

export default function App() {
  const [time, setTime] = useState(Date.now());
  useEffect(() => {
    const interval = setInterval(() => setTime(Date.now()), 500);
    return () => clearInterval(interval);
  }, []);

  const getStyle = useCallback(
    ({ x, y }) => {
      return { opacity: Math.sin((x + y) * (time / 5000)) };
    },
    [time]
  );

  const MemoPassed = useCallback(
    (args) => {
      return <Passed style={getStyle(args)} />;
    },
    [getStyle]
  );
  return <Grid countX={5} countY={5} Passed={MemoPassed} />;
}

Grid renders Cells further down the tree in which Passed is called:

export default function Cell({ x, y, Passed }) {
  const passedProps = { x, y };
  return (
    <div>
      <Passed {...passedProps} />
    </div>
  );
}

I managed to get it to work by calling getStyle in Cell component and passing it down, but that does not give me the elasticity I wanted. Also im curious why it does not work?