diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts
index 356e525b..00998ba4 100644
--- a/src/components/hooks/useLocale.ts
+++ b/src/components/hooks/useLocale.ts
@@ -4,7 +4,7 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import { useForceUpdate } from 'components/hooks';
+import { useForceUpdate } from './useForceUpdate';
 import enUS from '../../../public/intl/country/en-US.json';
 
 const messages = {
diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx
index 847a3218..34c80b5b 100644
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@@ -1,9 +1,9 @@
+'use client';
 import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
-import { useLocale } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLocale, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { formatDate, parseDateValue } from 'lib/date';
 
diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx
index 1ea8d392..6adeb214 100644
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
 import { useWebsite, useWebsites, useMessages } from 'components/hooks';