React framer-motion – how to start counting scrollYProgress starting from specific div

What I want to do is to count the scrollYProgress when the viewport arrives the top of the container and scrollYProgress should be 1 when leaving the box. How can I do it?

The current problem is that scrollYProgress start counting at the top of the application.

App.js

import React, { useState, useEffect } from "react";
import "./styles.css";
import { motion, useViewportScroll } from "framer-motion";

export default function App() {
  const { scrollYProgress } = useViewportScroll();

  useEffect(() => {
    return scrollYProgress.onChange((v) => {
      console.log(v);
    });
  }, [scrollYProgress]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <motion.div>
        <div
          style={{ height: "500px", margin: "1rem", border: "1px solid grey" }}
        >
          How to start Counting the percentage from 0 here
        </div>
      </motion.div>
      <h2>The percentage will be 100% when arriving the end of the box</h2>
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/adoring-poincare-curjo?file=/src/App.js:177-192