Markdown content in tabs using Docusaurus v2 - docusaurus

Question

I try to add markdown code inside a Tab, as explain the documentation.
The name file name has .mdx extension.
Here its content:
import Tabs from '#theme/Tabs';
import TabItem from '#theme/TabItem';
<Tabs
defaultValue="javascript"
values={[
{label: 'Javascript', value: 'javascript'},
{label: 'Other', value: 'other'},
]}>
<TabItem value="javascript">
```jsx
Formated code here
```
</TabItem>
<TabItem value="other">This is an orange 🍊</TabItem>
</Tabs>
But I'm getting this error:
SyntaxError: /home/angelcc/projects/simplex/osm4scala/website/docs/example.mdx: Expected corresponding JSX closing tag for <TabItem> (21:0)
19 | <TabItem value="other">This is an orange 🍊</TabItem>
20 | `}</code></pre>
> 21 | </Tabs>
| ^
22 | </MDXLayout>
23 | )
24 | };
No idea what I am doing wrong.
Versions:
"#docusaurus/core": "2.0.0-alpha.72",
"#docusaurus/preset-classic": "2.0.0-alpha.72",
"#mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
npm 6.12.1
node v12.13.1
Any suggestion?

Answer 1

You should delete spaces before tags <TabItem> and </TabItem>. I don't know why, but it's work. it should be like this:
import Tabs from '#theme/Tabs';
import TabItem from '#theme/TabItem';
<Tabs
defaultValue="javascript"
values={[
{label: 'Javascript', value: 'javascript'},
{label: 'Other', value: 'other'},
]}>
<TabItem value="javascript">
```jsx
Formated code here
```
</TabItem>
<TabItem value="other">This is an orange</TabItem>
</Tabs>

Answer 2

For me removing the spaces was not enough. So I did the following:
```mdx-code-block
<Tabs
defaultValue="javascript"
values={[
{label: 'Javascript', value: 'javascript'},
{label: 'Other', value: 'other'},
]}>
<TabItem value="javascript">
```
```jsx
Formated code here
```
```mdx-code-block
</TabItem>
<TabItem value="other">This is an orange</TabItem>
</Tabs>
```