Is there a way to make specific tags render as self-closing?

Repository here, live version here but I suspect this might be caused by a compiler setting?

I have an app that I'm using to make SVG game boards. I want to save them off, but I can't because they're compiling in an unexpected way. My JSX looks like this:

return (
    <g onClick={() => handleClick()}>
        <polygon
            style={{}}
            className={`hex ${cssClasses}`}
            id={`${props.id}`}
            points={polygonString}
        />
        {textForHex}
    </g>
)

It's rendering the polygon tags as :

<polygon class="hex just-grid" id="4" points="514,713 504,730 484,730 474,713 484,695 504,695"></polygon>

but I want to make them render as self-closing :

<polygon class="hex just-grid" id="4" points="514,713 504,730 484,730 474,713 484,695 504,695" />

Where in React is this compilation controlled? Is it possible to make it happen differently for that specific tag? Or is there somewhere I can insert my own render function to make them come out differently?