Мне нужно, чтобы мой фон прокручивался вверх, когда вы прокручиваете React-Pose

Question

Я работаю с React и React Pose, моя цель состоит в том, чтобы полоса прокрутки не появлялась, чего у меня сейчас нет. Но когда вы прокручиваете его, чтобы сказать "onScroll" или что-то в этом роде, фон автоматически переходит в положение и появляется другой контент. Чтобы сохранить работу, я сделал фон высотой 9000 пикселей и шириной 6000 пикселей, поэтому мне не нужно другое изображение, чтобы объединить и загрузить оба одновременно, чтобы первое исчезло. Единственное мое намерение состоит в том, чтобы onScroll изменил положение фона, я покажу вам свой код, чтобы увидеть, удалось ли мне объяснить

Я думаю, что я делаю это неправильно, или я не называю компоненты, которые я должен назвать хорошо. Большинство примеров React, которые я нашел, работают с классом, но сейчас я с функциями

const UpdownBackground = posed.div({
  enter: { y: 12, opacity: 1, delay: 100,
    transition: { duration: 500 } },
  exit: { y: 60, opacity: 1,
  transition: { duration: 400 } }
});


const App: React.FC = () => {


  const [visible, scrollVisible] = React.useState(true);

  const backgroundVisibility = () => scrollVisible(v => !v);


  // componentDidMount() {    
  //   window.onscroll = () => this.handleAnimation();  
  //  };


  return (


<div>

            {visible && <UpdownBackground key="Booking" className="background" onScroll={backgroundVisibility}>



    <div className="background">
      <BrowserRouter>
        <Home />

        <Redirect to="/" />
      </BrowserRouter>
      <script type="text/javascript" src="js/materialize.min.js" />
    </div>


    </UpdownBackground>} 
    </div>

  );
};

export default App;

Я думаю, что термин видимый или не видимый не является правильным для этого случая, я сделал с помощью этого кода похожую анимацию, в которой div показывался с одной стороны, но этот случай не был бы правильным для видимого термина, возможно, что-то лучше связано с Положение