Mermaid in tabs. The arrows are not displayed in the second tab

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Discussion from https://stackoverflow.com/questions/74474982/mermaid-in-tabs

The arrows are not displayed in the second tab It works here https://docusaurus.io/tests/pages/diagrams#mermaid-in-tabs

I have:

a) In "tab-a", the arrows are displayed:

b) But in "tab-b", the arrows are not displayed:

---

Version of docusaurus: 2.2.0
Type files: .md or .mdx

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="tab-a">

The following mermaid diagram is shown:

```mermaid
graph LR
  a ---> c(10)
  b ---> c(10)
```

</TabItem>

<TabItem value="tab-b">

This mermaid diagram is not displayed:

```mermaid
graph LR
  d ---> z(42)
  e ---> z(42)
```

</TabItem>
</Tabs>

Reproducible demo

No response

Steps to reproduce

1. Create new file .md
2. Add mermaid diagram graph LR in two tab

Expected behavior

Arrows are displayed in all tabs

Actual behavior

The arrows are not displayed in the second tab

Your environment

• Docusaurus version used: 2.2.0

Self-service

• I'd be willing to fix this bug myself.