[system][Stack] Fix displaying of rendering 0 when divider prop is passed

[sai6855]

Before preview: https://mui.com/material-ui/react-stack/#basics

after preview: https://deploy-preview-44126--material-ui.netlify.app/material-ui/react-stack/#basics

Place below code in both preview to see the difference, in after preview 0 is rendered but not in before preview

import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';


export default function BasicStack() {
  return (
    <Box sx={{ width: '100%' }}>
      <Stack spacing={2} divider={<div />}>
        <div>Item 1</div>
        {0}
        <div>Item 2</div>
        <div>Item 3</div>
      </Stack>
    </Box>
  );
}

I was going through this issue #43969 and found logic mentioned here as bit weird as 0 would get skipped by .filter(Boolean)

[mui-bot]

Netlify deploy preview

https://deploy-preview-44126--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f66f26b

[oliviertassinari]

• Shouldn't this be using getValidReactChildren()?
• I guess we miss

    if (isFragment(summary)) {
      return new Error('Not accepting Fragments');
    }

in getValidReactChildren()

• It looks like Stepper, SpeedDial, Breadcrumbs, AvatarGroup should use that helper too.

[sai6855]

Shouldn't this be using getValidReactChildren()?

Not sure about this, React.isValidElement is being used inside getValidReactChildren and React.isValidElement is returning false when any number or strings are passed (attached reference for this below).

So if we want to directly render numbers or strings without wrapping in html tags/React components, i think these would get skipped.