diff --git a/services/web/frontend/js/shared/hooks/use-persisted-state.js b/services/web/frontend/js/shared/hooks/use-persisted-state.ts
similarity index 79%
rename from services/web/frontend/js/shared/hooks/use-persisted-state.js
rename to services/web/frontend/js/shared/hooks/use-persisted-state.ts
index e01abb97b8..44236577a0 100644
--- a/services/web/frontend/js/shared/hooks/use-persisted-state.js
+++ b/services/web/frontend/js/shared/hooks/use-persisted-state.ts
@@ -1,15 +1,18 @@
-import { useState, useCallback, useEffect } from 'react'
+import {
+  useState,
+  useCallback,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+} from 'react'
 import localStorage from '../../infrastructure/local-storage'
 
-/**
- * @param {string} key
- * @param {any} [defaultValue]
- * @param {boolean} [listen]
- *
- * @returns {[any, function]}
- */
-function usePersistedState(key, defaultValue, listen = false) {
-  const [value, setValue] = useState(() => {
+function usePersistedState<T>(
+  key: string,
+  defaultValue?: T,
+  listen = false
+): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState<T>(() => {
     return localStorage.getItem(key) ?? defaultValue
   })
 
diff --git a/services/web/test/frontend/shared/hooks/use-persisted-state.test.js b/services/web/test/frontend/shared/hooks/use-persisted-state.test.tsx
similarity index 100%
rename from services/web/test/frontend/shared/hooks/use-persisted-state.test.js
rename to services/web/test/frontend/shared/hooks/use-persisted-state.test.tsx