React – how to update state from the prop of other library

I am using react-scrollmagic for scrolling effect.
When I use its component, there is a prop called progress,

{(progress, event) => (
   …
)}

Which I want to update my state currentProgress by.

How can I do it?

App.js

import "./styles.css";
import styled from "styled-components";
import { Controller, Scene } from "react-scrollmagic";
import React, { useState, useEffect } from "react";

const ClassToggleStyled = styled.div`
  .section {
    height: 100vh;
  }

  .test {
    transition: width 0.3s ease-out;
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 !important;

    &.yellow {
      background-color: yellow;
    }
  }
  .zap {
    width: 100%;
  }
`;

export default function App() {
  const [currentProgress, setCurrentProgress] = useState(0);

  useEffect(() => {
    // I want to update the currentProgress  whenever the progress changed becausing of scrolling
    setCurrentProgress(0);
  }, []);

  return (
    <ClassToggleStyled>
      <div style={{ position: "fixed", top: 0 }}>
        Current Progress: {currentProgress}
      </div>
      <div className="section" />
      <div id="trigger" />
      <Controller>
        <Scene
          duration={200}
          classToggle="zap"
          triggerElement="#trigger"
          indicators={true}
        >
          {(progress, event) => (
            <div className="test">
              <div style={{ position: "fixed", top: 30 }}>
                Progress: {progress}
              </div>
              Pin Test {event.type} {progress}
            </div>
          )}
        </Scene>
        <Scene
          classToggle={[".test", "yellow"]}
          reverse={false}
          indicators={true}
        >
          <div>Toggle other class</div>
        </Scene>
      </Controller>
      <div className="section" />
    </ClassToggleStyled>
  );
}

Codesandbox
https://codesandbox.io/s/nifty-hermann-byrvz?file=/src/App.js