[BUG] Arrows in markdown code snippets are way off on the right

[Fullchee]

Describe the bug

Arrows in markdown code snippets are way off on the right

Steps to reproduce the behavior

1. Install Storybook 6.2.9 in a new project
2. Create a story with this content

import React from 'react';

const Template = (args) => <button {...args} />;

const DESCRIPTION = ```

\`\`\`js
const arrowFunction = () => 42;
\`\`\`

export default {
  title: 'ButtonCategory/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: DESCRIPTION,
      }
    },
  },
};

Expected behavior

The arrow should be where it is in the text and not far out on the right.

Screenshots and/or logs

Environment

• OS: MacOS Big Sur 11.2.3
• Node.js version: v14.16.0
• NPM version: 6.14.11
• Browser: Chrome, Firefox and Safari
• Browser version 90.0.4430.212
• Device MacBook Pro (Intel)

Additional context

Unrelated: Safari doesn't have ligatures on the arrow

[Fullchee]

I can reproduce this issue on 6.3.4