diff --git a/packages/shoreline/src/components/date-picker/date-picker.tsx b/packages/shoreline/src/components/date-picker/date-picker.tsx
index 7f23c45a47..8114da12ac 100644
--- a/packages/shoreline/src/components/date-picker/date-picker.tsx
+++ b/packages/shoreline/src/components/date-picker/date-picker.tsx
@@ -32,8 +32,6 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   const state = useDatePickerState(domProps)
   const ref = useRef(null)
   const anchorRef = useRef<HTMLDivElement>(null)
-  const { groupProps, labelProps, fieldProps, buttonProps, calendarProps } =
-    useDatePicker(domProps, state, ref)
 
   const store = useFieldContext()
   const { id: contextId, error: contextError } = useStore(store, (s) => s)
@@ -41,6 +39,9 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   const id = defaultId || contextId
   const error = defaultError || contextError
 
+  const { groupProps, labelProps, fieldProps, buttonProps, calendarProps } =
+    useDatePicker({ ...domProps, id }, state, ref)
+
   return (
     <PopoverProvider
       open={state.isOpen}
diff --git a/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx b/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
index 0c2c8ae9b1..fd686083c2 100644
--- a/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
+++ b/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
@@ -28,6 +28,13 @@ export function DateRangePicker<T extends DateValue>(
   const state = useDateRangePickerState(domProps)
   const ref = useRef(null)
   const anchorRef = useRef<HTMLDivElement>(null)
+
+  const store = useFieldContext()
+  const { id: contextId, error: contextError } = useStore(store, (s) => s)
+
+  const id = defaultId || contextId
+  const error = defaultError || contextError
+
   const {
     groupProps,
     labelProps,
@@ -35,13 +42,7 @@ export function DateRangePicker<T extends DateValue>(
     endFieldProps,
     buttonProps,
     calendarProps,
-  } = useDateRangePicker(domProps, state, ref)
-
-  const store = useFieldContext()
-  const { id: contextId, error: contextError } = useStore(store, (s) => s)
-
-  const id = defaultId || contextId
-  const error = defaultError || contextError
+  } = useDateRangePicker({ ...domProps, id }, state, ref)
 
   return (
     <PopoverProvider
@@ -52,7 +53,6 @@ export function DateRangePicker<T extends DateValue>(
       <div ref={anchorRef} data-sl-date-range-picker>
         <div {...labelProps} />
         <div
-          id={id}
           data-sl-date-range-picker-input
           {...groupProps}
           ref={ref}