Storybook not showing code properly when we use MemoryRouter

Question

Basically, I am using MemoryRouter as decorator for storybook, When I try to check code in storybook, it shows very weird code.

My Codebase is as follows:

import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { NavLinkButton } from './';

import { MemoryRouter } from "react-router";

export default {
    title: 'Common Components/NavLinkButton',
    component: NavLinkButton,
    decorators: [
    (Story) => {
        const containerStyles: React.CSSProperties = {
            position: 'relative',
            height: 50,
            backgroundColor: 'unset',
        };
        return  (
            <MemoryRouter>
                <div style={containerStyles} className="cx-mainnav">
                    <Story />
                </div>
            </MemoryRouter>
          )
    },
  ],
} as ComponentMeta<typeof NavLinkButton>;

const Template: ComponentStory<typeof NavLinkButton> = (args) => (
    <NavLinkButton {...args} />
);

export const Default = Template.bind({});
Default.args = {
    icon: "bell",
    module: "Notifications",
    hoverLabel: "Notifications",
    caption: "Notifications",
}; 

This code renders storybook properly, But when i try to see code in storybook it gives very weird code in storybook, it gives following code:

As per my understanding, following code should get rendered but not sure why I am facing such issue:

 <NavLinkButton
        icon={'bell'}
        module={'Notifications'}
        hoverLabel={'Notifications'}
        caption={'Notifications'}
    />