I am using scrollYProgress from the framer motion and want the 0 and 1 value for a particular div only.

// imports 
const SampleComponent = ()=>{
  const targetRef = useRef(null) 
  const {scrollYProgress} = useScroll({
    target: targetRef
  })
  return (
   <div>
     <div>
      // very long div with a lot of content 
      </div>
      <div>
      <div ref={targetRef}> 
       // I want scroll values for this div only.
       // this div is also very long and I need ot scroll to view it's content
      </div>
   </div>
  )
}

The issue I am facing is for the target div the values I am getting are only for the content is present in the view initially. After the initial content i have to scroll and for that conetent I get 0 as scroll value.
How can I fix this?