Zoom

() => {
  const [scale, setScale] = useState(1);
  return (
    <Box style={{ width: '100%' }}>
      <ActionContainer
        actions={[
          {
            node: 'reset',
            onClick: () => setScale(1),
          },
          {
            node: 'zoom out',
            onClick: () => setScale(scale / 2),
          },
          {
            node: 'zoom in',
            onClick: () => setScale(scale * 2),
          },
        ]}
      >
        <Box sx={{ mt: '30px' }}>
          <Zoom scale={scale}>
            <Donut value={1 / 2} />
          </Zoom>
        </Box>
      </ActionContainer>
    </Box>
  );
}