sample2

type ComponentState = {
  provider: ProviderKind | undefined;
  selectedTPMRGs: TPMRG[];
  tpmrgs: TPMRG[];
};

const useComponentState = (initial?: {
  provider: ProviderKind;
  selectedTPMRGs: TPMRG[];
  tpmrgs: TPMRG[];
}) => {
  return useMultiQueryParameterState<ComponentState>()(
    ["rprovider", "rtpmrg", "rselectedTPMRG"] as const,
    { provider: undefined, selectedTPMRGs: [], tpmrgs: [] },
    // deserialize
    (v) => {
      const rprovider = (() => {
        if (initial?.provider != null) {
          return initial.provider;
        }

        if (typeof v.rprovider === "string" && isProviderKind(v.rprovider)) {
          return v.rprovider;
        } else {
          return undefined;
        }
      })();
      const rtpmrg = (() => {
        if (v.rtpmrg instanceof TPMRG) {
          return [v.rtpmrg];
        } else if (v.rtpmrg != null) {
          return v.rtpmrg;
        } else {
          return [];
        }
      })();
      const rselectedTPMRG = (() => {
        if (v.rtpmrg instanceof TPMRG) {
          return [v.rtpmrg];
        } else if (v.rtpmrg != null) {
          return v.rtpmrg;
        } else {
          return [];
        }
      })();
      return {
        tpmrgs: rtpmrg,
        provider: rprovider,
        selectedTPMRGs: rselectedTPMRG,
      };
    },
    // serialize
    (v) => {
      return {
        rtpmrg: v.tpmrgs,
        rprovider: v.provider || [],
      };
    },
  );
};