proptypes warning when passing an async server component as children

[Janpot]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-n2hgfw?file=src%2Fapp%2Fpage.tsx

Steps:

1. Open example
2. Check the browser console

Current behavior

Error:

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode.

The warning doesn't happen when you add a div in between

import { Box } from '@mui/material';

export async function ServerComponent() {
  return <h1>Test</h1>;
}

export default function Home() {
  return (
    <Box>
      <div>
        <ServerComponent />
      </div>
    </Box>
  );
}

Expected behavior

No proptypes error

Context

Related: #35676

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: proptypes server components

[oliviertassinari]

A bug with https://github.com/facebook/prop-types?

material-ui/packages/mui-material/src/Box/Box.js

Line 26 in f3945c1

children: PropTypes.node,

[Janpot]

Yep, I'm opening a ticket with them as well

[siriwatknp]

I guess we will just need to wait for the fix from React side or Next.js?

[siriwatknp]

duplicate of #39928