如何在两个React自定义钩子之间有一个共同的状态？

import React, { createContext } from 'react';

const SharedStateContext = createContext();

import React from 'react';
import { SharedStateContext } from './SharedStateContext';

const ParentComponent = () => {
  const sharedState = {
    count: 0,
    increment: () => {
      setSharedState(prevState => ({ ...prevState, count: prevState.count + 1 }));
    },
    decrement: () => {
      setSharedState(prevState => ({ ...prevState, count: prevState.count - 1 }));
    }
  };

  return (
    <SharedStateContext.Provider value={sharedState}>
      <ChildComponent1 />
      <ChildComponent2 />
    </SharedStateContext.Provider>
  );
};

import React, { useContext } from 'react';
import { SharedStateContext } from './SharedStateContext';

const useSharedState = () => {
  const sharedState = useContext(SharedStateContext);
  return sharedState;
};

const ChildComponent1 = () => {
  const { count, increment } = useSharedState();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const ChildComponent2 = () => {
  const { count, decrement } = useSharedState();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};