Integrating the presentation into existing website causes number of issues

I have a website that uses gatsby + material ui stack. It has its own landing page. i.e. src/pages/index.jsx

I want to host presentation as a part of the website. I intend to load the presentation in an iframe so as to reduce conflicts in styling or of any other kind.

Here are the observations

It works with hicccups.
I have tried loading the presentation in an iframe as well as in blank tab. The behavior is consistent.
When the slide deck loads, the first slide is blank with only the background color. If I navigate to the second slide and come back to the first, the content gets rendered
The shortcodes components like Header and Steps are not working. The content directly gets rendered.
Syntax highlighting is not work.
If I do away with index.js, the landing page hits 404 but the first slide renders correctly when I load it in a blank tab. For some reason, the shortcodes are still not working.
I have stripped out almost all the code of the website except for what is there in index.js that i use to load the iframe. SO there is little doubt something there is conflicting with the slides.

Here is the code for the

---
published: false
title: "JSON explained"
stream: File formats
authorHandles: 
    - "@sumedh"
---
import { highlight } from '@mdx-deck/themes'

import BTheme from './BTheme'

export const theme = {
    ...BTheme,
    ...highlight
}

<Header>
Show some header
</Header>

# JSON

## - by Sumedh   

---

# Summary of contents
<Steps>
- History
- Syntax
</Steps>

---

# History
<Steps>
- JavaScript Object Notation is a lightweight text-based open standard designed for human-readable data interchange.
- The JSON format was originally specified by Douglas Crockford, and is described in RFC 4627. 
</Steps>

---

# Example

 ```json
{
   "book": [

      {
         "id":"01",
         "language": "Java",
         "edition": "third",
         "author": "Herbert Schildt"
      },

      {
         "id":"07",
         "language": "C++",
         "edition": "second",
         "author": "E.Balagurusamy"
      }
    ]
}
\```

The last line has backslash. I am not sure what we use to escape the ticks

The deps section

"dependencies": {
    "@material-ui/core": "^4.11.0",
    "bluebird": "^3.7.2",
    "core-js": "^3.6.5",
    "gatsby": "*",
    "gatsby-plugin-catch-links": "^2.1.2",
    "gatsby-theme-mdx-deck": "^4.1.0",
    "lodash": "^4.17.20",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-iframe": "^1.8.0"
  }

The gatsby-config.json

plugins: [
    // 'gatsby-theme-slidedeck',
    {
      resolve: 'gatsby-theme-mdx-deck',
      options: {
        basePath: '/emaki',
      },
    },
  ],

jxnblk / mdx-deck

Integrating the presentation into existing website causes number of issues #749