How do I set header value from localStorage or Zustand in tRPC and React?

Hello,

This is my tRPC client in my

App.tsx

App.tsx

function App(): JSX.Element {
  const { token } = useAuthStore()
  const [trpcClient] = useState(() =>
    trpcReact.createClient({
      links: [
        httpBatchLink({
          url: 'http://192.168.1.17:3000/trpc',
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: 'include'
            })
          },
          headers: () => {
            return {
              Authorization: `Bearer ${token || ''}`
            }
          }
        })
      ],
      transformer: SuperJSON
    })
  )

function App(): JSX.Element {
  const { token } = useAuthStore()
  const [trpcClient] = useState(() =>
    trpcReact.createClient({
      links: [
        httpBatchLink({
          url: 'http://192.168.1.17:3000/trpc',
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: 'include'
            })
          },
          headers: () => {
            return {
              Authorization: `Bearer ${token || ''}`
            }
          }
        })
      ],
      transformer: SuperJSON
    })
  )

The problem is if the jwt token changes, it doesn't get changed in the trpcClient unless I do something like this but I don't like it: