<div class="container"></div>

const {   createContext,
  Dispatch,
  SetStateAction,
  useContext,
  useEffect,
  useRef,
  useState, } = React;

type ValueType = {
  [key: string]: Dispatch<SetStateAction<number | undefined>>;
};

const context = createContext<ValueType>(undefined as never);

const Component = ({ name }: { name: string }) => {
  console.log(name);
  const [value, setValue] = useState<number>();
  const dispatches = useContext(context);
  useEffect(() => {
    dispatches[name] = setValue;
    return () => {
      delete dispatches[name];
    };
  }, [name]);
  return (
    <div>
      {name}:{value}
    </div>
  );
};

const Page = () => {
  console.log("Main");
  const dispatches = useRef<ValueType>({}).current;
  return (
    <>
      <button onClick={() => dispatches["A"]?.((v) => (v || 0) + 1)}>A</button>
      <button onClick={() => dispatches["B"]?.((v) => (v || 0) + 1)}>B</button>
      <button onClick={() => dispatches["C"]?.((v) => (v || 0) + 1)}>C</button>
      <context.Provider value={dispatches}>
        <Component name="A" />
        <Component name="B" />
        <Component name="C" />
      </context.Provider>
    </>
  );
};

ReactDOM.render(<Page />, document.querySelector(".container"));