diff --git a/packages/react/src/enhancers/withDatasourceCheck.test.tsx b/packages/react/src/enhancers/withDatasourceCheck.test.tsx
index ac44e21d09..3aefd3bb72 100644
--- a/packages/react/src/enhancers/withDatasourceCheck.test.tsx
+++ b/packages/react/src/enhancers/withDatasourceCheck.test.tsx
@@ -2,37 +2,23 @@
 import React from 'react';
 import { expect } from 'chai';
 import { render } from '@testing-library/react';
-import { spy } from 'sinon';
-
-import { withDatasourceCheck, WithDatasourceCheckProps } from '../enhancers/withDatasourceCheck';
 import {
-  SitecoreProviderReactContext,
-  SitecoreProviderState,
-} from '../components/SitecoreProvider';
-import { LayoutServicePageState } from '@sitecore-content-sdk/content/layout';
-
-const mockContext = (editing: boolean): SitecoreProviderState => {
+  withDatasourceCheck,
+  WithDatasourceCheckProps,
+  Page,
+  PageMode,
+} from '../enhancers/withDatasourceCheck';
+
+// Helper to create the Page object state for tests
+const mockPage = (overrides?: Partial<PageMode>): Page => {
   return {
-    page: {
-      locale: 'en',
-      layout: {
-        sitecore: {
-          context: {},
-          route: null,
-        },
-      },
-      mode: {
-        name: LayoutServicePageState.Normal,
-        isNormal: false,
-        isPreview: false,
-        isEditing: editing,
-        isDesignLibrary: false,
-        designLibrary: {
-          isVariantGeneration: false,
-        },
-      },
+    mode: {
+      isNormal: false,
+      isPreview: false,
+      isEditing: false,
+      isDesignLibrary: false,
+      ...overrides,
     },
-    setPage: spy(),
   };
 };
 
@@ -53,26 +39,22 @@ describe('withDatasourceCheck', () => {
         componentName: 'TestComponent',
         dataSource: '',
       },
-    };
+      page: mockPage({ isNormal: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(false)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.be.empty;
   });
 
   it('should return null if rendering missing in normal mode', () => {
     const TestComponentWithDatasourceCheck = withDatasourceCheck()(TestComponent);
-    const props = {} as WithDatasourceCheckProps;
+    // @ts-ignore - simulating missing props
+    const props = {
+      page: mockPage({ isNormal: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(false)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.be.empty;
   });
@@ -84,13 +66,10 @@ describe('withDatasourceCheck', () => {
         componentName: 'TestComponent',
         dataSource: '',
       },
-    };
+      page: mockPage({ isEditing: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(true)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.querySelectorAll('div.sc-jss-editing-error')).to.have.length(1);
   });
@@ -100,18 +79,16 @@ describe('withDatasourceCheck', () => {
     const TestComponentWithDatasourceCheck = withDatasourceCheck({
       editingErrorComponent: CustomEditingError,
     })(TestComponent);
+
     const props = {
       rendering: {
         componentName: 'TestComponent',
         dataSource: '',
       },
-    };
+      page: mockPage({ isEditing: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(true)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.contain('Better than yours');
   });
@@ -123,20 +100,12 @@ describe('withDatasourceCheck', () => {
         componentName: 'TestComponent',
         dataSource: '',
       },
-    };
+      page: mockPage({ isDesignLibrary: true }),
+    } as WithDatasourceCheckProps;
 
-    const context = mockContext(false);
-
-    context.page.mode.isDesignLibrary = true;
-
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={context}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.contain(props.rendering.componentName);
-    expect(wrapper.container.innerHTML).to.contain(props.rendering.dataSource);
   });
 
   it('should return wrapped component if datasource present in normal mode', () => {
@@ -146,13 +115,10 @@ describe('withDatasourceCheck', () => {
         componentName: 'TestComponent',
         dataSource: '{CACDB205-2386-4271-9F05-AE20AAC2A39E}',
       },
-    };
+      page: mockPage({ isNormal: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(false)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.contain(props.rendering.componentName);
     expect(wrapper.container.innerHTML).to.contain(props.rendering.dataSource);
@@ -165,32 +131,10 @@ describe('withDatasourceCheck', () => {
         componentName: 'TestComponent',
         dataSource: '{CACDB205-2386-4271-9F05-AE20AAC2A39E}',
       },
-    };
+      page: mockPage({ isEditing: true }),
+    } as WithDatasourceCheckProps;
 
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(true)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
-
-    expect(wrapper.container.innerHTML).to.contain(props.rendering.componentName);
-    expect(wrapper.container.innerHTML).to.contain(props.rendering.dataSource);
-  });
-
-  it('should return wrapped component if not within SitecoreProvider', () => {
-    const TestComponentWithDatasourceCheck = withDatasourceCheck()(TestComponent);
-    const props = {
-      rendering: {
-        componentName: 'TestComponent',
-        dataSource: '{CACDB205-2386-4271-9F05-AE20AAC2A39E}',
-      },
-    };
-
-    const wrapper = render(
-      <SitecoreProviderReactContext.Provider value={mockContext(false)}>
-        <TestComponentWithDatasourceCheck {...props} />
-      </SitecoreProviderReactContext.Provider>
-    );
+    const wrapper = render(<TestComponentWithDatasourceCheck {...props} />);
 
     expect(wrapper.container.innerHTML).to.contain(props.rendering.componentName);
     expect(wrapper.container.innerHTML).to.contain(props.rendering.dataSource);
diff --git a/packages/react/src/enhancers/withDatasourceCheck.tsx b/packages/react/src/enhancers/withDatasourceCheck.tsx
index 68c34c2f78..68b7c83e43 100644
--- a/packages/react/src/enhancers/withDatasourceCheck.tsx
+++ b/packages/react/src/enhancers/withDatasourceCheck.tsx
@@ -1,15 +1,23 @@
 import React, { JSX } from 'react';
-import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
-import { useSitecore } from './withSitecore';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
 
 export const DefaultEditingError = (): JSX.Element => (
   <div className="sc-jss-editing-error" role="alert">
     Datasource is required. Please choose a content item for this component.
   </div>
 );
-
+export type PageMode = {
+  isNormal: boolean;
+  isPreview: boolean;
+  isEditing: boolean;
+  isDesignLibrary: boolean;
+};
+export type Page = {
+  mode: PageMode;
+};
 export interface WithDatasourceCheckProps {
   rendering: ComponentRendering;
+  page: Page;
 }
 
 export interface WithDatasourceCheckOptions {
@@ -33,15 +41,13 @@ export function withDatasourceCheck(options?: WithDatasourceCheckOptions) {
     Component: React.ComponentType<ComponentProps>
   ) {
     return function WithDatasourceCheck(props: ComponentProps) {
-      const { page } = useSitecore();
       const EditingError = options?.editingErrorComponent ?? DefaultEditingError;
-
+      const page = props?.page;
       // If the component is rendered in DesignLibrary, we don't need to check for datasource
-      const isDesignLibrary = page.mode.isDesignLibrary;
-
+      const isDesignLibrary = page?.mode?.isDesignLibrary;
       return isDesignLibrary || props.rendering?.dataSource ? (
         <Component {...props} />
-      ) : page.mode.isEditing ? (
+      ) : page?.mode?.isEditing ? (
         <EditingError />
       ) : null;
     };