react-infinite-scroll-component not triggering fetchMoreData function to fetch new Post when scrolled down

Question

I am currently working on an app to fetch more posts and am currently using react-infinite-scroll-component.

My Layout is structured in this format The header

._dashboard__header{
    max-height: 8rem;
    /* height: 10vh; */
    padding: 1rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 3px 0px 20px rgba(0, 0, 0, 0.04);
}

Dashboard Wrapper containing the Sidebar and the main content

._dashboard__wrapper_1w610_65 {
    display: flex;
}

The main sidebar has the following css styles

._dashboard__sidebar {
    width: 20%;
    max-height: 93vh;
    height: 90vh;
    overflow: scroll;
    padding-top: 2rem;
    background-color: #ffffff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.04);
}

Dashboard Content

._dashboard__content {
    flex-basis: 80%;
    height: 90vh;
    overflow: scroll;
    padding: 3rem 6.9rem;
}

Seems my HTML structure is the reason.

I imported the component to occupy the whole page and it works well but when imported at the right hand side then it doesnt fetch more data