Check tagName after render

App.tsx

import { FC, PropsWithChildren, ReactElement, useEffect, useRef, useState } from "react"

const GetTagName: FC<PropsWithChildren<{ el?: ReactElement }>> = ({el, children}) => {
  const [tagName, setTagName] = useState('')
  const wrapper = useRef(null);

  useEffect(() => {
    const inner = wrapper?.current as HTMLElement | null

    if (!inner) {
      return;
    }

    const nested = inner.querySelector('*')

    if (!nested) {
      setTagName('No child provided!')

      return
    }

    setTagName(nested.tagName)
  }, [wrapper])

  return (
    <>
      <div ref={wrapper} style={{display: 'none'}}>
        {children ?? el}
      </div>
      <p>{tagName}</p>
    </>
  )
}

const ProxiedDiv: FC = () => <div />

const ProxiedArticle: FC = () => <><article /></>

const App: FC = () => {
  return (
    <>
      <GetTagName el={<div />} />
      <GetTagName el={<article />} />
      <GetTagName>
        <ProxiedDiv />
      </GetTagName>
      <GetTagName>
        <ProxiedArticle />
      </GetTagName>
      <GetTagName />
    </>
  )
}

export default App