How to use scrollableRef provided by useScrollIntoView() externally

[somber grove]

I have a component that internally uses useScrollIntoView() to scroll through some of the children. Everything works fine until this component is in a ScrollArea.
The useScrollIntoView() provides scrollableRef to set a parent, but the problem is that this scrollableRef is inside my component.

<ScrollArea h={300}>
  <MyComponent>
    <h2>Children</h2>
  </MyComponent>
</ScrollArea>

How do I set scrollableRef that is located inside MyComponent?

const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView(...)

I already tried with

const scrollRef = useRef<HTMLDivElement>(null);

...

<ScrollArea ref={scrollRef} h={300}>
  <MyComponent parentScrollableRef={scrollRef}>
    <h2>Children</h2>
  </MyComponent>
</ScrollArea>

and in MyComponent

const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView(...)
...
useImperativeHandle(parentScrollableRef, () => scrollableRef.current);

but it seems not working 🤔 any clue ?

[tulip pond]

I guess, you need to use viewportRef insead of ref prop for ScrollArea

const viewportRef = useRef();

<ScrollArea viewportRef={viewportRef}>
  ...
</ScrollArea>