Passing reference or child component with ref, invariant error

[paulm17]

I'm trying to have the draghandle in a child component.

parent component:

const elementRef = useRef<HTMLDivElement>(null);
const dragHandleRef = useRef<HTMLButtonElement>(null);

useEffect(() => {
      const element = elementRef.current;
      const dragHandle = dragHandleRef.current;

      invariant(element);
      invariant(dragHandle);

      return combine(
        draggable({
          element: dragHandle,
          getInitialData: () => item,
          onDragStart() {
          },
          onDrop() {
          },
        })
      )
    }, [item, index]);

Passing in as children (to the child component):

<Toolbar id={item.id} parentId={parentId} index={index} count={count}>
   <UnstyledButton ref={dragHandleRef} className="text-white text-[16px] cursor-move py-[2px] px-[7px] bg-[rgba(0,93,159)] hover:bg-[rgb(0,46,79)]">
      <Icon icon="arrows" type="fas" />
   </UnstyledButton>
</Toolbar>

Or Pass by forward ref (to the child component):

<Toolbar ref={dragHandleRef} id={item.id} parentId={parentId} index={index} count={count} />

Toolbar component:

export const Toolbar = forwardRef<HTMLButtonElement, toolbarProps>(
  ({ id, parentId, index, count }, ref) => {
  
   <UnstyledButton ref={ref} className="text-white text-[16px] cursor-move py-[2px] px-[7px] bg-[rgba(0,93,159)] hover:bg-[rgb(0,46,79)]">
      <Icon icon="arrows" type="fas" />
   </UnstyledButton> 

My actual use case is pass by forward ref...

But in either case I get:

Error: Invariant failed

I hope this is enough to convey the issue. Thanks!