where to spread props and pass refs exactly in radix ui react?

Question

So my guess is that if custom component doesn't accept children and has DOM element like button, then we should spread props and pass ref to it.

But if custom component gets children instead and has multiple radix element nested, I don't know where to spread props and pass our ref. Onto the one that is direct parent of {children} or the one that is on top level? Or how we decide it?

I have 3 sample components given. Please explain for each of them where props and refs should go and why. Also since I am not sure which element gets props and refs, I was not able to give proper TS types.

// sample 1
const ToolbarButtonWithTooltip = React.forwardRef<any, any>(
    ({ children, tooltipContent, ...props }, forwardedRef) => {
        return (
            <Toolbar.Button asChild>
                <TooltipProvider tooltipContent={tooltipContent}>
                    <button
                        {...props}
                        ref={forwardedRef}
                        className="cursor-pointer rounded bg-blue-500 text-slate-50"
                    >
                        {children}
                    </button>
                </TooltipProvider>
            </Toolbar.Button>
        );
    }
);

// sample 2
const TooltipProvider = forwardRef<any, any>(({ tooltipContent, children, ...props }, forwardedRef) => {
    return (
        <Tooltip.Provider delayDuration={100}>
            <Tooltip.Root>
                <Tooltip.Trigger asChild>
                    { children }
                </Tooltip.Trigger>
                <Tooltip.Portal>
                    <Tooltip.Content className="rounded bg-slate-900 p-1 text-slate-50">
                        {tooltipContent}
                        <Tooltip.Arrow className="fill-slate-900" />
                    </Tooltip.Content>
                </Tooltip.Portal>
            </Tooltip.Root>
        </Tooltip.Provider>
    );
});

// sample 3
const SelectViewPort = forwardRef<any, any>(({ children, ...props }, forwardedRef) => {
    return (
        <Select.Portal>
            <Select.Content>
                <Select.Viewport
                    className="rounded bg-slate-900 text-slate-50"
                >
                    {children}
                </Select.Viewport>
            </Select.Content>
        </Select.Portal>
    );
});```


(I checked shadcn ui library to see where he passes props and refs, but it didn't help me understanding it)