Material UI Collapse / React-Spring transition bug ( When Expanding / Collapsing – Whole page scrolls )

I been facing this bug for some time now, the issue is when collapsing/expanding with the Mui Collapse transition, the whole browser page scrolls when the animation happens:

https://imgur.com/a/NPvhdHb

This is my code for Mui Collapse:

<Collapse in={overTitle}>

    <Box
        sx={{
            // color: "#FFC121",
            color: "#FFF",
            fontSize: "20px",
            fontWeight: 600,
            paddingBottom: "20px",
            marginRight: "40px",
        }}
    >
    
        {"Subtitle Text Here"}
    
    </Box>


</Collapse>

This is my code using react-spring:

// React Spring
const [measureRef, { height }] = useMeasure();

const collapse_styles = useSpring({
    config: config.stiff,
    from: {
        height: 0
    },
    to: {
        height: overTitle ? height : 0
    }
});


<animated.div style={{ overflow: "hidden", ...styles }}>

        <div
          ref={measureRef}
        >
        
          {"Subtitle Text Here"}
          
        </div>
        
</animated.div>

both are simple examples yet both face the same scrolling issue,

can anyone explain why this is happening? is this a known bug?