diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 265af6587..d32a8b07f 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -79,6 +79,6 @@ export type DrawDefinition = (
  */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
 
-export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unknown>;
 
-export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 79f3ec992..33e886848 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -15,18 +15,16 @@ const draw: DrawDefinition = (text, id, version) => {
     log.debug('rendering info diagram\n' + text);
 
     const { securityLevel } = getConfig();
+
     // handle root and document for when rendering in sandbox mode
-    let sandboxElement: HTML | undefined;
     let document: Document | null | undefined;
     if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-      document = sandboxElement.nodes()[0].contentDocument;
+      const sandboxElement: HTML = select('#i' + id);
+      document = sandboxElement.node()?.contentDocument;
     }
-
-    // @ts-ignore - figure out how to assign HTML to document type
     const root: HTML =
-      sandboxElement !== undefined && document !== undefined && document !== null
-        ? select(document)
+      document !== undefined && document !== null
+        ? select(document.body as HTMLIFrameElement)
         : select('body');
 
     const svg: SVG = root.select('#' + id);
@@ -34,7 +32,6 @@ const draw: DrawDefinition = (text, id, version) => {
     svg.attr('width', 400);
 
     const g = svg.append('g');
-
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -43,7 +40,7 @@ const draw: DrawDefinition = (text, id, version) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
   } catch (e) {
-    log.error('error while rendering info diagram', e);
+    log.error('error while rendering info diagram\n', e);
   }
 };