reactjs - react-animations 与 material-ui 中的网格系统有冲突

Question

在这段代码中，我使用了两个库。Material-Ui 和 Rect-Animation。我使用处理程序来改变状态，当状态改变时，我想显示不同的东西。我认为 AnimateOnChange 将其子项的显示更改为类似 flex 的内容，我不知道。有人能帮我吗？

import MenuItem from '@material-ui/core/MenuItem';
import React, { useEffect, useState, useRef } from 'react';
import Grid from '@material-ui/core/Grid';
import { Box } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import { AnimateOnChange } from 'react-animation'
export default function AddCompany() {
  const [flag, setFlag] = useState(true)
  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={2}></Grid>
        <Grid item xs={8}>
            <Grid item xs={12}>
                    <button onClick={()=>setFlag((pre)=>!pre)}>change page</button>
            </Grid>
            <AnimateOnChange>
              {flag == "1" ? (
                <Grid container spacing={1}>
                  <Grid item xs={12} md={5}></Grid>
                  <Grid item xs={12} md={4}>
                    <Typography variant="h5" gutterBottom>
                       page 1
                    </Typography>
                  </Grid>
                </Grid>
              ) : (
                <Grid container spacing={1}>
                  <Grid item xs={12} md={5}></Grid>
                  <Grid item xs={12} md={4}>
                    <Typography variant="h5" gutterBottom>
                       page 2
                    </Typography>
                  </Grid>
                </Grid>
              )}
            </AnimateOnChange>
        </Grid>
      </Grid>
    </>
  );
}