Conditional Component Type rendering?

I am trying to work on a component where depending on a variable I need to wrap it with either an

<a>

<a>

<a>

<a> tag or a

<div>

<div>

<div>

<div>.

The only conditional flow related documentation uses the

<Show>

<Show>

<Show>

<Show> component, but I'm trying to do something more akin to

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

I'm pretty sure something like the following would work, but how do I do this with basic HTML elements?

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

thanks!