I am trying to add props to the components in a page from the layout like so:

app/layout.tsx

export default function Layout(props: PropsWithChildren) {
  const msg = 'test test';

  const childrenWithProps = Children.map(
    props.children,
    (child): ReactElement => {
      if (isValidElement(child)) {
        return cloneElement(child, { msg });
      }
      return <>{child}</>;
    }
  );

  return <>{childrenWithProps}</>;
}

and then

app/page.tsx

const Message = ({ msg }: { msg?: string }) => {
  return <div>{msg}</div>;
};

export default function Page() {
  return (
    <>
      <Message />
      <Message />
      <Message />
    </>
  );
}

I did the same thing in a different part of the app where it works great, the difference is that its not a page and layout relation, but just two client side components.