Attempted import error: 'defaultLocale' is not exported

[salman0ansari]

getting this error when using Calendar

import { Calendar } from "@/components/ui/calendar"
 <Calendar
          mode="single"
          selected={startDate}
          onSelect={(e) => setStartDate(new Date(e))}
          initialFocus
        />

Import trace for requested module:
./node_modules/date-fns/format.mjs
./node_modules/date-fns/index.mjs
./node_modules/react-day-picker/dist/index.esm.js
./components/ui/calendar.tsx
./app/(private)/admin/log/table.tsx
 ⨯ ./node_modules/date-fns/format.mjs
Attempted import error: 'defaultLocale' is not exported from './_lib/defaultLocale.mjs' (imported as 'defaultLocale').

Import trace for requested module:
./node_modules/date-fns/format.mjs
./node_modules/date-fns/index.mjs
./node_modules/react-day-picker/dist/index.esm.js
./components/ui/calendar.tsx
./app/(private)/admin/log/table.tsx