Reactjs components error - reactjs

Question

I am completely new to React and I need to make an infinite scroll effect by including some divs from another component. I have found an infinite scroll library online and I am using it here in the index.js file. I have created my divs in Home.js but I am getting some errors like:-
Error: Mandatory prop "refreshFunction" missing. and TypeError: this.props.next is not a function. Can someone help me out please. I think even though I am exporting Home.js and then importing it in index.js but it is still not able to invoke the methods. Can someone please let me know what I am doing wrong and how to correct it? I have added the code below.
index.js
import React from 'react';
import { render } from "react-dom";
import InfiniteScroll from 'react-infinite-scroll-component';
import { Home } from "./components/Home";
class App extends React.Component{
render() {
return (
<InfiniteScroll
pullDownToRefresh
pullDownToRefreshContent={
<h3 style={{ textAlign: 'center' }}>↓ Pull down to refresh</h3>
}
releaseToRefreshContent={
<h3 style={{ textAlign: 'center' }}>↑ Release to refresh</h3>
}
refreshFunction={this.refresh}
next={this.generateDivs}
hasMore={true}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}>
<Home/>
</InfiniteScroll>
);
}
}
render(<App />, window.document.getElementById("app"));
Home.js
import React from "react";
const style = {
display: 'flex',
alignItems: 'center',
fontSize: 40,
border: '2px solid red',
margin: ' 0 auto 10px auto',
textAlign: 'center'
}
const divs = [
<div key={1} style={{ height: 200, ...style }}>Div no 1</div>,
<div key={2} style={{ height: 200, ...style }}>Div no 2</div>,
<div key={3} style={{ height: 200, ...style }}>Div no 3</div>,
<div key={4} style={{ height: 200, ...style }}>Div no 4</div>,
<div key={5} style={{ height: 200, ...style }}>Div no 5</div>,
<div key={6} style={{ height: 200, ...style }}>Div no 6</div>,
<div key={7} style={{ height: 200, ...style }}>Div no 7</div>,
<div key={8} style={{ height: 200, ...style }}>Div no 8</div>,
];
export class Home extends React.Component{
constructor() {
super();
this.state = {
divs: divs
};
this.generateDivs = this.generateDivs.bind(this);
this.refresh = this.refresh.bind(this);
}
generateDivs() {
let moreDivs = [];
let count = this.state.divs.length;
console.log(count);
for (let i = 0; i < 30; i++) {
moreDivs.push(
<div key={'div' + count++} style={{ height: 200, ...style }}>
Div no {count}
</div>
);
}
setTimeout(() => {
this.setState({ divs: this.state.divs.concat(moreDivs) });
}, 500);
}
refresh() {
this.setState({ divs: [] });
setTimeout(() => {
this.setState({ divs });
}, 3000);
}
render() {
return (
<div>
{this.state.divs}
</div>
);
}
}