How do i scroll page vertically by dragging from inside a horizontally scrollable component

I have a vertically scrollable page and several horizontally scrollable components inside this layout. The issue is once i reach the horizontally scrollable component, im unable to scroll page vertically. To scroll page, i need to either do by dragging the component outside the horizontally scrollble component or by using arrow keys or mouse wheel.

Here's the Component

<SliderContainer onScroll={handleScroll} ref={scrollRef}>
    <MovementButton className="movementButton" top="50%" left="3rem" onClick={()=> slide(-250)} ><HiArrowNarrowLeft className="icon" /></MovementButton>
        {sliderData.map((data,index)=> {
            return (
                <SliderItem key={index}>
                    <img className="img" src={data.img} alt="sliderImage"/>
                    <div className="content">
                        <TextField className="title">{data.title}</TextField>
                        <TextField className="location">{data.location}</TextField>
                        <TextField className="message">{data.message}</TextField>
                        <a href={data.link} target="blank" rel="noreferrer noopener">
                            <TextField className="readMore">Read More</TextField>
                        </a>
                    </div>
                </SliderItem>
            );
        })}
    <MovementButton className="movementButton" top="50%" right="3rem" onClick={()=> slide(250)}><HiArrowNarrowRight className="icon" /></MovementButton>
</SliderContainer>

Here's the Styled Component structure.

export const SliderContainer = styled.div`
    position: relative;
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    width: 100%;
    justify-content: space-between;
    scrollbar-width: none;
    overflow-x: scroll;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    gap: 4rem;
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    scroll-behavior: smooth;
    touch-action: pan-x;
    padding: 0.5rem 1rem 2rem;
    margin: 3rem auto 1rem;
    @media ${(props) => props.theme.breakpoints.md} {
        padding-left: 7rem;
        padding-right: 7rem;
    }
`;
export const SliderItem = styled.div`
    display: flex;
    flex-direction: column;
    max-width: 350px;
    background: #FFFFFF;
    box-shadow: 0px 4.93023px 8.62791px -1.23256px rgba(35, 81, 163, 0.33);
`;

I know i'm missing maybe one or two properties or just changing a value should solve this. but after struggling with this for like 2 days maybe i could use some help.