diff --git a/change/@fluentui-react-datepicker-compat-f143ceb3-20ad-4819-bf20-0dc080c494ef.json b/change/@fluentui-react-datepicker-compat-f143ceb3-20ad-4819-bf20-0dc080c494ef.json
new file mode 100644
index 00000000000000..8104b06982e8c0
--- /dev/null
+++ b/change/@fluentui-react-datepicker-compat-f143ceb3-20ad-4819-bf20-0dc080c494ef.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: adopt custom JSX pragma",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json
index dcad0c1b4dc093..50edc08388701b 100644
--- a/packages/react-components/react-datepicker-compat/package.json
+++ b/packages/react-components/react-datepicker-compat/package.json
@@ -37,6 +37,7 @@
     "@fluentui/keyboard-keys": "^9.0.2",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/react-input": "^9.4.10",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.1",
     "@fluentui/react-popover": "^9.5.9",
     "@fluentui/react-portal": "^9.2.6",
     "@fluentui/react-positioning": "^9.5.10",
diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx
index 857785f1c8bf8c..89b9b65545eef3 100644
--- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx
+++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx
@@ -1,6 +1,11 @@
+/** @jsxRuntime classic */
+/** @jsxFrag React.Fragment */
+/** @jsx createElement */
+
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import { createElement } from '@fluentui/react-jsx-runtime';
 import { Portal } from '@fluentui/react-portal';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { CalendarProps } from '../Calendar/Calendar.types';
 import type { DatePickerSlots, DatePickerState } from './DatePicker.types';
 
@@ -8,7 +13,7 @@ import type { DatePickerSlots, DatePickerState } from './DatePicker.types';
  * Render the final JSX of DatePicker
  */
 export const renderDatePicker_unstable = (state: DatePickerState) => {
-  const { slots, slotProps } = getSlots<DatePickerSlots>(state);
+  const { slots, slotProps } = getSlotsNext<DatePickerSlots>(state);
   const { inlinePopup } = state;
 
   return (