diff --git a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
index 48c96a3fd..72c3cde28 100644
--- a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
+++ b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
@@ -5,9 +5,8 @@ import userEvent from '@testing-library/user-event';
 import useWS from '@site/src/hooks/useWs';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render, screen, act } from '@testing-library/react';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
-import { act } from 'react-dom/test-utils';
 
 jest.mock('@docusaurus/router', () => ({
   useLocation: () => ({
@@ -44,6 +43,8 @@ const mockUseDynamicImportJSON = useDynamicImportJSON as jest.MockedFunction<
   () => Partial<ReturnType<typeof useDynamicImportJSON>>
 >;
 
+const mockHandleSelectChange = jest.fn();
+
 mockUseDynamicImportJSON.mockImplementation(() => ({
   request_info: {
     auth_required: 1,
@@ -56,6 +57,7 @@ mockUseDynamicImportJSON.mockImplementation(() => ({
     title: 'this is a test title',
   },
   setSelected: jest.fn(),
+  handleTextAreaInput: mockHandleSelectChange,
   handleSelectChange: jest.fn(),
   text_data: {
     name: null,
@@ -149,6 +151,13 @@ describe('ApiExplorerFeatures', () => {
       await userEvent.click(close_button);
       expect(dialog).not.toBeVisible();
     });
+
+    it('should change the text when writing in the textbox', async () => {
+      const json_box = screen.getByPlaceholderText('Request JSON');
+      expect(json_box).toBeVisible();
+      await userEvent.type(json_box, 'test123');
+      expect(mockHandleSelectChange).toHaveBeenCalled();
+    });
   });
 
   describe('Logged in', () => {
diff --git a/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx b/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
index b0103a7da..50669c165 100644
--- a/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
+++ b/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
@@ -1,7 +1,10 @@
+import React from 'react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import { renderHook } from '@testing-library/react-hooks';
 import { act } from 'react-dom/test-utils';
 import useDynamicImportJSON from '..';
+import { cleanup, render, screen } from '@testing-library/react';
 
 jest.mock('@docusaurus/router', () => ({
   useLocation: () => ({
@@ -20,6 +23,7 @@ describe('useDynamicImportJSON', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+    cleanup();
   });
 
   it('should populate text data with the correct values', () => {
@@ -32,31 +36,74 @@ describe('useDynamicImportJSON', () => {
     });
   });
 
+  it('should be able to call handleTextAreaInput when typing in a textarea', async () => {
+    const spyHandleInputFunction = jest.spyOn(result.current, 'handleTextAreaInput');
+
+    render(<textarea placeholder='testtextarea' onChange={result.current.handleTextAreaInput} />);
+
+    const textarea = screen.getByPlaceholderText('testtextarea');
+    expect(textarea).toBeVisible();
+
+    await userEvent.type(textarea, 'test123');
+    expect(spyHandleInputFunction).toHaveBeenCalled();
+  });
+
   it('should have the correct hash value in the URL on selection of an api call', () => {
     const location = require('@docusaurus/router').useLocation();
     const url = location.hash;
     expect(url).toMatch('active_symbols');
   });
 
-  it('should check for change in hash value and update text data accordingly', () => {
-    act(() => {
-      jest.mock('@docusaurus/router', () => ({
-        useLocation: () => ({
-          pathname: '/api-explorer#active_symbols',
-          hash: '#active_symbol',
-        }),
-        useHistory: () => ({
-          push: jest.fn(),
-        }),
-      }));
-      const mockEvent = {
-        currentTarget: {
-          value: 'active_symbols',
+  it('should check for change in hash value and update text data accordingly', async () => {
+    jest.mock('@site/src/utils/playground_requests', () => ({
+      playground_requests: [
+        {
+          name: 'active_symbols',
+          title: 'Active Symbols',
+          body: {
+            active_symbols: 'brief',
+            product_type: 'basic',
+          },
         },
-        preventDefault: jest.fn(),
-      };
+      ],
+    }));
+
+    jest.mock('@docusaurus/router', () => ({
+      useLocation: () => ({
+        pathname: '/api-explorer#active_symbols',
+        hash: '#active_symbol',
+      }),
+      useHistory: () => ({
+        push: jest.fn(),
+      }),
+    }));
+
+    const mockEvent = {
+      currentTarget: {
+        value: 'active_symbols',
+      },
+      preventDefault: jest.fn(),
+    };
+
+    const spyHandleSelectChange = jest.spyOn(result.current, 'handleSelectChange');
+
+    const mockHandleSelectChange = () =>
       result.current.handleSelectChange(mockEvent, 'active_symbols');
-    });
+
+    render(
+      <div>
+        <button className='simulated_option' onClick={() => mockHandleSelectChange()}>
+          Active Symbols
+        </button>
+      </div>,
+    );
+
+    const option = screen.getByRole('button', { name: 'Active Symbols' });
+
+    await userEvent.click(option);
+
+    expect(spyHandleSelectChange).toHaveBeenCalled();
+
     expect(result.current.text_data).toEqual({
       request: '{\n  "active_symbols": "brief",\n  "product_type": "basic"\n}',
       selected_value: 'Active Symbols',
diff --git a/src/hooks/useDynamicImportJSON/index.tsx b/src/hooks/useDynamicImportJSON/index.tsx
index d9b9f4cb4..d52debeb2 100644
--- a/src/hooks/useDynamicImportJSON/index.tsx
+++ b/src/hooks/useDynamicImportJSON/index.tsx
@@ -69,12 +69,6 @@ const useDynamicImportJSON = () => {
     },
     [setRequestInfo, setResponseInfo],
   );
-  useEffect(() => {
-    const hash_value = hash.split('#')[1];
-    const request_body = playground_requests.find((el) => el.name === hash_value);
-    const is_not_placeholder = text_data.selected_value === request_body?.name;
-    if (is_not_placeholder) dynamicImportJSON(text_data.selected_value);
-  }, [dynamicImportJSON, hash, text_data.selected_value]);
 
   useEffect(() => {
     const hash_value = hash.split('#')[1];