Attempting to output HTML tag in MDX results in string, not HTML object

Question

I have an external icon library I am attempting to import into Material-UI using the SvgIcon component. I'm unsure if this is a driving factor behind the issue or not.

The icon is a <path> statement in a JSX file. I've imported the file and extract the <path> from the object within. I've tried a few different ways to output the result:

export const Thing = () => <>{accessibility1Icon[1].outline}</>

export const Template = (args) => {
  const path = accessibility1Icon[1].outline;
  console.log(path);
  return (
    <div>
      <SvgIcon {...args}><Thing /></SvgIcon>
      <SvgIcon {...args}>{path}</SvgIcon>
      <SvgIcon {...args}><>{path}</></SvgIcon>
      <p>{path}</p>
    </div>
  )
}

<Canvas>
  <Story
    name="Icon"
    args={{
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

In all three instances the output appears almost correct, except that the <path> is surrounded by quotes.

<svg>
  "<path>...</path>"
</svg>

The console.log from the MDX does not output quotes, but when it appears in the HTML they are there.

How do I take the <path> string I've extracted for my icon and include it in the output without quotes, thus letting SvgIcon take it from there?