Adding Custom Headers in trpc using local storage

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());
  const [header, setHeader] = useState<string>("");
  console.log("trpc react => api key: ", apiKey);

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
              "x-header-key": header,
            };
          },
        }),
      ],
    })
  );

  useEffect(() => {
    setHeader(localStorage.getItem("header-item"));

    const fetchHeaderItem = () => {
      setApiKey(localStorage.getItem("header-item"));
    }

    window.addEventListener("header-item-storage-event", fetchHeaderItem);

    return () => {
      window.removeEventListener("header-item-storage-event", fetchHeaderItem);
    }
  }, []);