React-spring Parallax

I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the animated containers equally.

Here I made a snippet which contains a basic parallax effect animating some divs on scroll:

<Parallax pages={5}>
  <ParallaxLayer offset={0} speed={0.4} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={0.9} speed={0.6} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.1} speed={0.8} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.9} speed={1} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={2} speed={1.2} style=>
    <div className="box" />
  </ParallaxLayer>
</Parallax>

I set them with an incremental speed to give that parallax effect, plus I tried increasing / decreasing the offsets to have them distanciated equally, but that didn't work much as they get placed too close or too far away between each other.

Is there a way to overcome this?

from React-spring Parallax