When using Link, I have encountered no issues. It has the ability to accept children.
import { Link } from 'react-router-dom';
<Link to=''>
{content}
</Link>
Similarly, <button> can also be used in a similar manner.
<button>
{content}
</button>
I can dynamically create either a Link or a button without any problems.
import { Link } from 'react-router-dom';
const MyElement = condition ? Link : 'button';
<MyElement />
However, as soon as I attempt to add children, an issue arises.
import { Link } from 'react-router-dom';
const MyElement = condition ? Link : 'button';
<MyElement>
{content}
</MyElement>
Type '{ children: MyElement; }' has no properties in common with type 'IntrinsicAttributes'.
I find it puzzling how the TypeScript types are preventing children in the variable component.
This is with the use of react-router-dom version 5.3.4.