Dynamic component tag dont work

[Kudou Sterain]

// eslint-disable-next-line import/named
import { ComponentStory, ComponentMeta } from '@storybook/react'

import Typo from '../components/base/Typography'
import 'twin.macro'
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Base/Text/Typography',
  component: Typo,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Typo>

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Typography: ComponentStory<typeof Typo> = (args) => (
  <Typo {...args} />
)
Typography.args = {
  children: 'H1 Text',
  as: 'h1',
  color: 'primary',
}

import { useEffect } from '@storybook/addons'
import { useLayoutEffect } from 'react'
import { useRef } from 'react'
import { PropsWithChildren } from 'react'
import tw, { css, styled } from 'twin.macro'
interface TypoProps {
  textSize?: number
  color?:
    | 'primary'
    | 'secondary'
    | 'info'
    | 'error'
    | 'onPrimary'
    | 'onSecondary'
    | 'onInfo'
    | 'onError'
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'
}
function Typo(props: PropsWithChildren<TypoProps>) {
  const { children, as, ...passProps } = props
  const ref = useRef<any>()
  useLayoutEffect(() => {
    console.log(ref)
  }, [ref])
  return (
    <STypo {...passProps} ref={ref} as="h5">
      {children}
    </STypo>
  )
}

const STypo = styled.h1<TypoProps>(({ textSize, color, as }) => {
  return [
    as == 'h1' && tw`text-4xl`,
    as == 'h2' && tw`text-3xl`,
    as == 'h3' && tw`text-2xl`,
    as == 'h4' && tw`text-xl`,
    as == 'h5' && tw`text-lg`,
    as == 'h6' && tw`text-base`,
    as == 'span' && tw`text-sm`,
    color == 'primary' && tw`text-primary-base`,
    color == 'secondary' && tw`text-secondary-base`,
    color == 'onPrimary' && tw`text-on-primary`,
    color == 'onSecondary' && tw`text-on-secondary`,
    color == 'info' && tw`text-info`,
    color == 'error' && tw`text-error`,
    color == 'onInfo' && tw`text-on-info`,
    color == 'onError' && tw`text-on-error`,
    textSize &&
      css({
        fontSize: `${textSize}rem`,
      }),
  ]
})
Typo.defaultProps = {
  as: 'h1',
  color: 'primary',
}
export default Typo

I try to change the tag dynamically in the storybook it doesn't work.
I also track the STypo in the Typo component, whenever I change the tag programmatically, it creates a new element and can't be tracked by useRef.

[Kudou Sterain]

Got a fix by renaming as props in Typo component to some else word, for example :' tag'.In case just want to keep as as props what should I do?

[Ben Rogerson]

Looks similar to #762 - let me know if it's the same fix for you

[Kudou Sterain]

Looks similar to #762 - let me know if it's the same fix for you

"ForwardAs" did work ,sincerely thank you.