How to combine worklets and useImperativeHandle?

[enzomanuelmangano]

Specifically, the problem I am experiencing occurs when I try to pass a function into useImperativeHandle, for instance:

const scrollTo = useCallback((destination: number) => {
 'worklet';
 active.value = destination !== 0;

 translateY.value = withSpring(destination, { damping: 50 });
}, []);

useImperativeHandle(ref, () => ({ scrollTo, isActive }), [
 scrollTo,
 isActive,
]);

scrollTo is a worklet, but when I pass it into the ref and try to call it from the parent component, I can't reuse it as a worklet.
For example, the code below will not work and we'll get the error "Cannot assign to read-only property 'current'".
What is interesting is that by doing a hot reload and passing the same code instead, the function will be considered a worklet 🫣

useDerivedValue(() => {
  ref.current?.scrollTo(100);
}, []);

However, I was wondering if there was a way to handle this pattern so that the function of a child component could be reused in a parent component.
An initial idea was to not use the useImperativeHandle but perhaps pass the function into a SharedValue, but unfortunately even then it does not work, since we can't pass functions through SharedValues 🙄

I sincerely hope that someone has an answer to this topic 🥹