react-infinite-scroll-component: scrollableTarget not working

Hi, i was having trouble while using infinite scrolling, because data was being loaded when my browsers main window scrollbar scrolled. So i tried using scrollableTarget to fix the problem, but when i tried using it the loader keeps displaying and no data is fetched. Code looks like this:

<Container id="divID">
        <InfiniteScroll
          dataLength={this.state.logs.length}
          next={this.fetchMoreData}
          hasMore={true}
          loader={<Loader />}
          scrollableTarget="divID"
        >
          <Table striped>
            <thead>
              <tr>
                <th>...</th>
                <th>...</th>
                <th>...</th>
              </tr>
            </thead>
            <tbody>
              {this.state.logs.map(event => (
                <tr key={event.id}>
                  <td>....</td>
                  <td>....</td>
                  <td>....</td>
                </tr>
                    ))}
            </tbody>
          </Table>
        </InfiniteScroll>
</Container>

Here you can see the id of Container

I Also tried using scrollableTarget=document.getElementById("divID") and it now renders the content but it only loads more data when the main window scrollbar moves not when the one in my Table element does.