Trying to use MappedReactiveVariable

mappedReactiveVariable.ts

import { makeVar, ReactiveVar } from '@apollo/client';
import React, { useEffect, useState, useCallback } from 'react';
import isEqual from 'lodash/isEqual';

type Data = {
  title: string;
  date: Date;
};

// Create the reactive variable with Map<number, Data> type
export const referRequestMetaVar = makeVar<Map<number, Data>>(new Map([
  [1, {
    title: 'InitialValue',
    date: new Date(),
  }],
  // Add more entries as needed
]));

// Utility method to update a specific key within referRequestMetaVar
export const updateReferRequestMetaVarKey = (key: number, newMeta: Data) => {
  referRequestMetaVar((prevMap) => {
    const newMap = new Map(prevMap);
    newMap.set(key, newMeta);
    return newMap;
  });
};

// Custom hook to watch changes to a specific key within a reactive variable
export const useReactiveVarForKey = <T>(reactiveVar: ReactiveVar<T>, key: number) => {
  const [value, setValue] = useState(() => reactiveVar()[key]);

  useEffect(() => {
    const handleChange = () => {
      const newValue = reactiveVar()[key];
      if (!isEqual(newValue, value)) {
        setValue(newValue);
      }
    };

    const unsubscribe = reactiveVar.subscribe(handleChange);

    return () => {
      unsubscribe();
    };
  }, [reactiveVar, key, value]);

  const setValue = useCallback(
    (newValue: T) => {
      setValue(newValue);
      updateReferRequestMetaVarKey(key, newValue);
    },
    [key]
  );

  return { value, setValue };
};

// Example usage
// const { value, setValue } = useReactiveVarForKey(referRequestMetaVar, 1);

// React component using the custom hook
const MyComponent = ({ watchedKey }) => {
  const { value, setValue } = useReactiveVarForKey(referRequestMetaVar, watchedKey);

  // Example of using setValue
  // setValue(newReferRequestMeta);

  return (
    <div>
      <p>{`${watchedKey}: ${JSON.stringify(value)}`}</p>
    </div>
  );
};

export default MyComponent;