diff --git a/src/App.tsx b/src/App.tsx
index 8c0e94c..f01f886 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,8 +3,7 @@ import React, { useState } from "react";
 import { SourceViewer } from "./components/SourceViewer";
 import { CompletionViewer } from "./components/CompletionViewer";
 
-import { completionMapping } from "./logic/completionMapping";
-import { sourceMapping } from "./logic/sourceMapping";
+import { useCompletionMapping } from "./logic/completionMapping";
 import { runEngine } from "./logic/runEngine";
 
 import "./tailwind.output.css";
@@ -15,6 +14,7 @@ World!\`; abc()`;
 
 function App() {
   const [inputCode, setInputCode] = useState<string>(sampleInputCode);
+  const completionMapping = useCompletionMapping();
 
   // useLayoutEffect(() => {
   runEngine(inputCode);
@@ -31,7 +31,6 @@ function App() {
         <CompletionViewer
           code={inputCode}
           completionDetails={completionMapping.completionDetails}
-          sourceMapping={sourceMapping}
         />
       </div>
     </div>
diff --git a/src/components/CompletionViewer/CompletionViewer.tsx b/src/components/CompletionViewer/CompletionViewer.tsx
index 9c5277c..c898cab 100644
--- a/src/components/CompletionViewer/CompletionViewer.tsx
+++ b/src/components/CompletionViewer/CompletionViewer.tsx
@@ -1,18 +1,14 @@
 import React from "react";
 import { ICompletionDetail } from "../../logic/completionMapping";
-import { TSourceMapping } from "../../logic/sourceMapping";
 
 import { CompletionCardFull } from "../CompletionCard";
 
 export function CompletionViewer(props: {
   code: string;
   completionDetails: ICompletionDetail[];
-  sourceMapping: TSourceMapping;
 }) {
   const { code, completionDetails } = props;
 
-  // function renderCompletionResult(inputCompletion: ICompletionDetail) {}
-
   return (
     <div className="">
       {/* Title for completion section */}
diff --git a/src/components/SourceViewer/SourceViewer.tsx b/src/components/SourceViewer/SourceViewer.tsx
index ef36e1d..10d3098 100644
--- a/src/components/SourceViewer/SourceViewer.tsx
+++ b/src/components/SourceViewer/SourceViewer.tsx
@@ -8,16 +8,17 @@ import {
   Token,
 } from "../../types/prism-types";
 
-import { sourceMapping } from "../../logic/sourceMapping";
+import { TSourceMapping, useSourceMapping } from "../../logic/sourceMapping";
 import {
   useCompletionMapping,
   ICompletionDetail,
-  ICompletionMapping,
+  TCompletionMapping,
 } from "../../logic/completionMapping";
 
 function getCompletionFromSourceToken(
   matcheeToken: Token,
-  completionMapping: ICompletionMapping
+  completionMapping: TCompletionMapping,
+  sourceMapping: TSourceMapping
 ): ICompletionDetail | null {
   const matchingSourceDetails = sourceMapping.mappingArray.find(
     ({ token: tmpToken }) => matcheeToken === tmpToken
@@ -72,7 +73,9 @@ function PreRenderer({
   getLineProps,
   getTokenProps,
 }: IPreRendererProps) {
+  const sourceMapping = useSourceMapping();
   sourceMapping.reset();
+
   return (
     <pre className={`${className} px-4 py-2 overflow-auto`} style={style}>
       {tokens.map((line, i) => (
@@ -123,6 +126,7 @@ function TokenRenderer({
   getTokenProps,
 }: ITokenRendererProps) {
   const completionMapping = useCompletionMapping();
+  const sourceMapping = useSourceMapping();
 
   const refFn = sourceMapping.registerToken(token);
   if (isLastTokenInLine) {
@@ -132,7 +136,8 @@ function TokenRenderer({
   const onClickToken = (tmpToken: Token) => {
     const matchingCompletion = getCompletionFromSourceToken(
       tmpToken,
-      completionMapping
+      completionMapping,
+      sourceMapping
     );
     if (matchingCompletion !== null) {
       console.log(
diff --git a/src/logic/completionMapping.ts b/src/logic/completionMapping.ts
index 911f8e3..b3e8c53 100644
--- a/src/logic/completionMapping.ts
+++ b/src/logic/completionMapping.ts
@@ -13,13 +13,13 @@ export interface ICompletionDetail {
   completionValue: any;
 }
 
-export interface ICompletionMapping {
+export interface TCompletionMapping {
   completionDetails: ICompletionDetail[];
   addCompletion(_: { node: Node; result: CompletionRecord }): void;
   reset(): void;
 }
 
-export const completionMapping: ICompletionMapping = {
+const completionMapping: TCompletionMapping = {
   completionDetails: [],
   addCompletion({ node, result }) {
     const { start, end } = node;
diff --git a/src/logic/sourceMapping.tsx b/src/logic/sourceMapping.tsx
index c6fd67a..bc6b58e 100644
--- a/src/logic/sourceMapping.tsx
+++ b/src/logic/sourceMapping.tsx
@@ -17,7 +17,7 @@ export interface TSourceMapping {
   getElementsInRange(start: number, end: number): HTMLElement[];
 }
 
-export const sourceMapping: TSourceMapping = {
+const sourceMapping: TSourceMapping = {
   mappingArray: [],
   lastEnd: 0,
   registerToken(t: Token) {