How to use react svg functional component in map markers

I have a bunch of react SVG functional components, I am not sure how it can be used as a marker with Tomtom map sdk

SVG functional component.

function TS(props) {
  return (
    <svg viewBox="0 0 400 400" xmlns="" strokeWidth="2">
        <title>Layer 1</title>
        <line stroke="#333" strokeWidth="2" id="ASD" y2="380" x2="200" y1="20" x1="200" fill="none" />

export default TS;