diff --git a/packages/raystack/components/calendar/date-picker.tsx b/packages/raystack/components/calendar/date-picker.tsx
index 000bfc8b9..af2ed0932 100644
--- a/packages/raystack/components/calendar/date-picker.tsx
+++ b/packages/raystack/components/calendar/date-picker.tsx
@@ -200,6 +200,7 @@ export function DatePicker({
   return (
     <Popover open={showCalendar} onOpenChange={onOpenChange}>
       <Popover.Trigger
+        nativeButton={isValidElement(trigger) ? false : true}
         render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
       />
       <Popover.Content
diff --git a/packages/raystack/components/calendar/range-picker.tsx b/packages/raystack/components/calendar/range-picker.tsx
index d1eec604d..d249909bc 100644
--- a/packages/raystack/components/calendar/range-picker.tsx
+++ b/packages/raystack/components/calendar/range-picker.tsx
@@ -168,6 +168,7 @@ export function RangePicker({
   return (
     <Popover open={showCalendar} onOpenChange={setShowCalendar}>
       <Popover.Trigger
+        nativeButton={isValidElement(trigger) ? false : true}
         render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
       />
       <Popover.Content