React infinite scrolling

Question

I'm trying to do an infinite scrolling with react components, I tried to use react-infinite-scroll-component npm package but it seems to doesn't fit with my project.

I need to have 2 map function to display the content of the infinite scrolling in order to look like this : https://i.stack.imgur.com/i9yQA.jpg

1 map for the left content and 1 map for the right content.

When I try to use the npm package with both map the cols just stop working and the second map go below the other.

Here is the code. I was wondering if there is a solution with the npm package and if there is not, is it possible to do it from scratch or my setup with 2 map will block me ?

            <div className="col-lg-6 mb-5 mb-lg-0 noPaddingLeft">
          ----> 1 map    {results.map((item, index) => {
                return (
                  <div key={index}>
                    {item.map((subitem, i) => {
                      if (i === 0) {
                        return (
                          <BigCard
                            key={i}
                            article={subitem}
                            authors={authors}
                          />
                        );
                      }
                    })}
                  </div>
                );
              })}
            </div>

            <div className="col-lg-6 pl-lg-4 noPaddingRight">
         ----> 2 map  {results.map((item, index) => {
                return (
                  <div key={index}>
                    {item.map((subitem, i) => {
                      if (i !== 0) {
                        return <LilCard key={i} article={subitem} />;
                      }
                    })}
                  </div>
                );
              })}
            </div>
          </div> 

Thanks guys.