diff --git a/react/src/DatePicker/DatePicker.stories.tsx b/react/src/DatePicker/DatePicker.stories.tsx
index 5ffb7edd..c5fb95fc 100644
--- a/react/src/DatePicker/DatePicker.stories.tsx
+++ b/react/src/DatePicker/DatePicker.stories.tsx
@@ -78,7 +78,7 @@ const CustomInputButton = forwardRef<object, 'button'>((_props, ref) => {
   const refs = useMergeRefs(inputRef, innerRef, ref)
 
   return (
-    <Button ref={refs} onClick={onOpen}>
+    <Button ref={refs} onClick={onOpen} maxWidth="full">
       please look at source code to see how to use custom elements
     </Button>
   )
@@ -88,3 +88,9 @@ export const CustomInput = Template.bind({})
 CustomInput.args = {
   inputElement: <CustomInputButton />,
 }
+
+export const MobileCustomInput = Template.bind({})
+MobileCustomInput.args = {
+  inputElement: <CustomInputButton />,
+}
+MobileCustomInput.parameters = getMobileViewParameters()
diff --git a/react/src/DatePicker/components/DatePickerWrapper.tsx b/react/src/DatePicker/components/DatePickerWrapper.tsx
index 327b0c30..f1ad0f93 100644
--- a/react/src/DatePicker/components/DatePickerWrapper.tsx
+++ b/react/src/DatePicker/components/DatePickerWrapper.tsx
@@ -21,7 +21,7 @@ export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
   if (isMobile) {
     return (
       <Flex>
-        <DatePickerInput />
+        {inputToRender}
         {children}
       </Flex>
     )