Reactjs 材质UI：如何设置元素宽度的动画

我正在尝试用react和materialui制作一些内联元素的动画。 我写了下面的代码：

const Panel = ({isIn}) => {
    return <>
    <Paper elevation={4} style={{height: '1.5em'}}>
    <Box flexDirection="row" display="inline-flex">
      <Box p={0.5}>
        This
      </Box>
      <Box p={0.5}>
        is
      </Box>
      <Zoom in={isIn} timeout={1000}>
      <Box p={0.5} overflow="hidden" display="flex" flexWrap="nowrap" whiteSpace='nowrap' position="relative" style={{width: 'auto'}} zIndex={1}>
        a great day
      </Box>
      </Zoom>
      <Box p={0.5}>
        for all of us
      </Box>
    </Box>
    </Paper>
    </>
}

function App() {
  const [state, setState] = React.useState({
            isChecked: true,
  });
  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };
  return (
    <Container>
      <Grid container direction="column" spacing={3}>
        <Grid item>
          <Switch
            checked={state.isChecked}
            onChange={handleChange}
            name="isChecked"
            color="primary"
          />
        </Grid>
        <Grid item>
          <Panel isIn={state.isChecked}/>
        </Grid>
      </Grid>
    </Container>
  );
}

export default App;

const面板=（{isIn}）=>{
返回
这
是
美好的一天
为了我们所有人
}
函数App（）{
常量[状态，设置状态]=React.useState({
我问：是的，
});
常量handleChange=（事件）=>{
setState（{…state，[event.target.name]：event.target.checked}）；
};
返回(
);
}
导出默认应用程序；

结果看起来像

问题：如何设置消失的实际元素的宽度（或大小）的动画？因此，我希望在没有空格的情况下顺利过渡到句子（可能过渡到显示：无）