React Query and Localstorage

I’m new to react query I’m getting user data after Login and store it in a localstorage hook, after I navigate to Page.tsx I get the data but when I use invalidateQuery somewhere else it doesn’t work and the data still not updated

useGetParcels.tsx

import { getBikerParcels } from "@/models/bikerModels";
import { getSenderParcels } from "@/models/senderModels";
import { User } from "@/types/dataTypes";
import { useQuery } from "@tanstack/react-query";

const useGetParcels = (userData: User) => {
  return useQuery(
    ["user-parcels", userData?.id],
    async () => {
      let res;
      if (userData.type === "biker") {
        res = await getBikerParcels(userData?.id);
      } else if (userData?.type === "sender") {
        res = await getSenderParcels(userData?.id);
      }
      const parcels = res.data.parcels;
      return parcels;
    },
    {
      staleTime: 1000 * 60 * 100,
      enabled: userData?.id?.length > 0,
    }
  );
};

export default useGetParcels;

Page.tsx

"use client";

import React from "react";
import SenderTable from "./senderTable";
import useLocalStorage from "@/hooks/useLocalStorage";
import BikerTable from "./bikerTable";
import useGetParcels from "@/hooks/queries/useGetParcels";
import Loading from "@/components/Loading";
import Nav from "@/components/Nav";

export default function Dashboard() {
  const [userData] = useLocalStorage("userData", null);

  const { data: parcels, isLoading, error } = useGetParcels(userData);

  if (isLoading) {
    return <Loading />;
  }

  return (
    <>
      {userData?.type === "sender" && <Nav />}
      {userData?.type === "sender" ? (
        <SenderTable parcels={parcels} />
      ) : (
        <BikerTable parcels={parcels} />
      )}
    </>
  );
}

tried removing the optional chaining and it worked but I get TypeError: Cannot read properties of null (reading 'id') Error