MUI Slide animation smooth push out of elements

I am currently trying to use the React MUI Slide in a button over a card. The slide animation works well, however it snaps out the content over it to the top instantly when it mounts since the element is with full height when it mounts.

Does anyone have ideas on how to solve that. This is the structure currently:

      <Slide
        unmountOnExit
        key={2}
        direction="up"
        in={showLink}
        container={containerRef.current}>
        <Button
          sx={{
            mt: 1,
          }}
          variant="contained"
          color="secondary">
          Support now
        </Button>
      </Slide>

If you apply position: "absolute" to the button and position: "relative" to the component to which containerRef refers, you will remove the block positioning of the sliding button and get the behavior that I think you want.

const containerRef = useRef();
[...]
<ContainerBox
  ref={containerRef} 
  sx={{ position: "relative", overflow: "hidden" }}
>
  <Slide {...slideProps} >
    <Button 
      sx={{ position: "absolute" }}
    >
      Button
    </Button>
  </Slide>
</ContainerBox>

Edit:

In response to the comment and to try and to get the text to transition along with the button on hover.

Since MUI Slide simply adds in-line transition styling to the child element, you can mimic the same behavior with some simple CSS. By applying the same transition properties to both the text and button elements, they should act the same. Also, you can pull the transition variables from the theme by the useTheme() hook.

eg:

const theme = useTheme();

const transitionStyle = {
  position: "absolute",
  bottom: `${hovered ? "0px" : "-36px"}`,
  transitionProperty: "bottom",
  transitionDuration: `${theme.transitions.duration.standard}ms`,
  trasitionTimingFunction: `${theme.transitions.easing.easeIn}`
};

[...]

<Typography
  sx={{
    ...transitionStyle,
    marginBottom: "36px" //push the text up by the button height
  }}
>
  Stuff
</Typography>
<Button variant="contained" sx={transitionStyle}>
  Button
</Button>

Here's what I came up with: CodeSandbox Link