InifiniteScroll component wrapping material UI Grid

When i using a grid component inside InfiniteScroll component, its only show one item per row, even though i want to show 5 item per row, it doesnt work.

 <InfiniteScroll>
   {userFeed.map(item => (
      <Grid>
      </Grid>
   ))}
</InfiniteScroll>

[brunoqs]

to make this work with material ui i need to wrap all Grids components with the InfiniteScroll component, like that :

 <InfiniteScroll>
   <Grid container>
      {userFeed.map(item => (
         <Grid>
         </Grid>
      ))}
   </Grid>
</InfiniteScroll>

[samuel-knutson]

I had the same issue with the Grid component from semantic-ui-react. I was able to get it working by setting the semantic-ui class names directly instead of using semantic-ui-react. Specifically, I (1) set className="ui grid" on the InfiniteScroll component and (2) set className="two wide column" on the item itself. I have not used material UI, but perhaps you can do something similar.