diff --git a/packages/frontend/admin/package.json b/packages/frontend/admin/package.json
index a0fede15a2..dec637f26b 100644
--- a/packages/frontend/admin/package.json
+++ b/packages/frontend/admin/package.json
@@ -42,7 +42,7 @@
     "lucide-react": "^0.438.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.0.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.0",
     "react-resizable-panels": "^2.0.19",
diff --git a/packages/frontend/admin/src/components/ui/calendar.tsx b/packages/frontend/admin/src/components/ui/calendar.tsx
index 19f412500a..9b96b3eace 100644
--- a/packages/frontend/admin/src/components/ui/calendar.tsx
+++ b/packages/frontend/admin/src/components/ui/calendar.tsx
@@ -2,7 +2,7 @@ import { buttonVariants } from '@affine/admin/components/ui/button';
 import { cn } from '@affine/admin/utils';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import type * as React from 'react';
-import { DayPicker } from 'react-day-picker';
+import { Chevron, DayPicker } from 'react-day-picker';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -51,8 +51,15 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="w-4 h-4" />,
-        IconRight: () => <ChevronRight className="w-4 h-4" />,
+        Chevron: props => {
+          if (props.orientation === 'left') {
+            return <ChevronLeft className="w-4 h-4" />;
+          }
+          if (props.orientation === 'right') {
+            return <ChevronRight className="w-4 h-4" />;
+          }
+          return <Chevron {...props} />;
+        },
       }}
       {...props}
     />
diff --git a/yarn.lock b/yarn.lock
index 54150c00b8..a879ecd1b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -205,7 +205,7 @@ __metadata:
     lucide-react: "npm:^0.438.0"
     next-themes: "npm:^0.3.0"
     react: "npm:^18.3.1"
-    react-day-picker: "npm:^8.10.1"
+    react-day-picker: "npm:^9.0.0"
     react-dom: "npm:^18.3.1"
     react-hook-form: "npm:^7.52.0"
     react-resizable-panels: "npm:^2.0.19"
@@ -30838,13 +30838,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-day-picker@npm:^8.10.1":
-  version: 8.10.1
-  resolution: "react-day-picker@npm:8.10.1"
+"react-day-picker@npm:^9.0.0":
+  version: 9.0.8
+  resolution: "react-day-picker@npm:9.0.8"
+  dependencies:
+    date-fns: "npm:^3.6.0"
   peerDependencies:
-    date-fns: ^2.28.0 || ^3.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/374056dca7fed70a154a3b0e98c6c746c26b4fc868548fa8f285ef3cab9679537e84c0c21ba7b6db67b3f7f54cc562f5d83efba2c7f2c7bd3705ac8992869607
+    react: ">=16.8.0"
+  checksum: 10/8a941b71e29a07a6ef40e35e5f6f46a332537184b4d67d90093415c4ade6c66dc787c0f26ca0841b4ee8bca40b05fa881cd73d69a263720c4c3da1e3c0a7bb37
   languageName: node
   linkType: hard