Use TransitionGroup with Grid

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I tried to get the below code to work, but wrapping the grid item breaks the layout, because it wraps the children in a div, so I added component={null}, but then the Grid items don't get stretched to the width:

Trying this: <Collapse key={index} component={Grid}> doesn't seem to properly inherit the props from the container Grid element.

Is there any way for this example so the grid doesn't break?

Expected behavior 🤔

 <Box>
    <Grid container spacing={2}>
      <TransitionGroup component={null}>
        {items
          ? map(items, (item, index) => {
              return (
                <Collapse key={index}>
                  <Grid item xs={12} sm={6} md={4} lg={3} xl={2}>
                    <SomeComponent item={item} />
                  </Grid>
                </Collapse>
              )
            })
          : null}
      </TransitionGroup>
    </Grid>
  </Box>

Steps to reproduce 🕹

To reproduce, try the above code

Context 🔦

No response

Your environment 🌎

System:
    OS: Windows 10 10.0.18363
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.18362.1533.0)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.59
    @mui/icons-material: ^5.2.1 => 5.2.1
    @mui/lab: ^5.0.0-alpha.60 => 5.0.0-alpha.60
    @mui/material: ^5.2.3 => 5.2.3
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.0
    @mui/system:  5.2.3
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react: ^17.0.0 => 17.0.37
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.1.2 => 4.5.3

No repository file or test is named. Start by reproducing the provided Grid, TransitionGroup, and Collapse example with the listed MUI packages, then inspect how the Grid container and transition wrapper handle component={null} and component={Grid}; done means the items remain stretched without breaking the grid layout during transitions.