How to use react svg functional component in map markers

Maps SDK for Web (JavaScript)
#1

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="http://www.w3.org/2000/svg" strokeWidth="2">
      <g>
        <title>Layer 1</title>
        <line stroke="#333" strokeWidth="2" id="ASD" y2="380" x2="200" y1="20" x1="200" fill="none" />
      </g>
    </svg>
  )
}

export default TS;