reactjs - 反応アニメーションは、マテリアル UI のグリッド システムと競合しています

Question

このコードでは、2 つのライブラリを使用しています。Material-Ui と Rect-Animation。状態を変更するためにハンドラーを使用し、状態が変更されたときに別のものを表示したいと考えています。AnimateOnChange は、その子の表示をフレックスのようなものに変更すると思いますが、わかりません。誰かが私を助けることができますか？

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>
    </>
  );
}