ForwardRef using polymorphic component

[LoiKos]

Hi guys !

I am building for my app some reusable components that should use React.ForwardRef. Unfortunately i don't understand how to handle React.ForwardRef combine to as props.

Here is a sandbox about a Stack component.
Currently this component doesn't handle ref correctly.

Could you give me some advice on how to do that ?

PS : i'm not tied to use as: "div" | "ul" | "ol" | "section" i'm fine using the default as props but i didn't manage to make it work with StackProps.

I already try to handle as much as possible directly through styled-components but in some cases more complex i need to switch between two different styled-components :

function Columns(props){
  const shouldCollapse = {...} // details
  
  return  shouldCollapse ? <Stack {...props} /> : <StylesColumns {...props} />
}