react-spring parallax not working on refresh

Question

<Parallax pages={2} ref={ref}>
    <ParallaxLayer offset={0} speed={1} factor={2}>
      <Snowfall snowflakeCount={35} color={'#53bdfc'} />

      <section className='hero-section'>
        <div className='container'>
          <div
            className='hero-main'
            style={{ backgroundImage: `url(${background})` }}
          >
            <div className='hero-text'>
              <motion.h1
              >
                Community{' '}
                <motion.span
                >
                  First
                </motion.span>
              </motion.h1>
              <motion.p
              >
               Text
              </motion.p>
            </div>
            <motion.img
              src={HeroImage}
              alt='hero_image'
            />
          </div>
        </div>
        <Footer />
      </section>
    </ParallaxLayer>
    <ParallaxLayer
      offset={0}
      speed={1}
      style={{
        backgroundImage: `url(${SeaBackground})`,
        backgroundSize: 'cover',
        zIndex: -2,
      }}
    />
  </Parallax>

This is in my App.js.

The thing is, if I change something from the code and not hit refresh, the parallax is working. But if I refresh, then it stops working. Is this some kind of mounting issue? Any help would be greatly appreciated!

Answer 1

I also faced the same issue today and I downgraded react version 18 to 17.0.2 everything works fine so far.