如果在切换按钮中使用网格，则OnChange事件不起作用
使用Grid或Stack事件可以正常工作
如何排列2 x 2按钮
我在材料ui网站上看不到任何关于这个的例子
有人能帮帮忙吗

const [testTime, setTestTime] = useState<string | null>('1');

    const handleTestTime = (event: React.MouseEvent<HTMLElement>, newTime: string | null) => {
      console.log(newTime);
      setTestTime(newTime);    
    };

     <Box>
      <Typography variant="body2">
        Toggle Button
      </Typography>
      <ToggleButtonGroup 
        value={testTime}
        exclusive 
        onChange={handleTestTime}>
        <Grid container spacing={1}>
          <Grid item xs={6}>
            <ToggleButton value="earlymorning">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Early Morning</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="morning">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Morning</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="afternoon">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Afternoon</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="evening">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Evening</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
        </Grid>
      </ToggleButtonGroup>
    </Box>