Using JS in .mdx won't result in correct markdown styles

[valpioner]

Summary

Hi. When I try to use JS to create content for my .mdx documentation page, it doesn't apply the expected styles.

In my case, I have an array of objects and I want to build a table based on that with pre-applied styles like text highlighting (using ``) and local links (using []), but I simply get `text` instead of text and [localLink] instead of the actual link.

Here is a simplified example of the problem:

// .mdx
export const scope = '`Scope`';

<table>
  <tr>
    <td>`Scope`</td>
    <td>{scope}</td>

In terms of DOM, here is what i get:

This behavior prevents me from using js arrays to form ui elements (with md styles pre-applied) like

  {rows.map((row) => (
    <tr>
      <td>{row.prop}</td>
      ...
   }

Instead, my only option is to hardcode template elements with the data.
I would appreciate any help.

I have also asked in discord, but no respond so far.

Additional information

I am using Storybook ^8.4.5

Create a reproduction

No response