"position:sticky" does not work if contained in a parent

Question

I am implementing a pull to refresh (this is the library ), and it works fine in my code. I'm trying to make each item in my array contained in state.items have position:sticky so that it is positioned at the top of the screen while scrolling.

The problem is that if I combine my <PullToRefresh> component, position:sticky doesn't work anymore, but if I comment out the whole <PullToRefresh> component works fine.

this is my live code:

https://codesandbox.io/s/fervent-voice-1k3mt

(<PullToRefresh> is commented, position:sticky is working, but if but if I uncomment <PullToRefresh> the position:sticky will not work.):

  <>
    {/*<PullToRefresh
      pullDownContent={<div>Pulling</div>}
      releaseContent={<div>Releasing...</div>}
      refreshContent={<div>Refreshing...</div>}
      pullDownThreshold={0}
      onRefresh={async () => {
        this.addData();
      }}
      triggerHeight={600}
      backgroundColor={"white"}
      startInvisible={true}
    >*/}
    {this.state.items.map((title, i) => {
      return <h4 className="title">title {i}</h4>;
    })}
    {/*</PullToRefresh>*/}
  </>

How can I fix it so that I can have the <PullToRefresh> component and inside the titles with sticky position? or what alternative can I do to make my code work?