如何使用自定义钩子在组件之间共享状态数据？

import { useState } from 'react';

function useSharedState(initialState) {
  const [state, setState] = useState(initialState);

  const updateState = (newState) => {
    setState(newState);
  };

  return [state, updateState];
}

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

function ComponentA() {
  const [sharedState, setSharedState] = useSharedState('Initial value');

  const handleClick = () => {
    setSharedState('Updated value');
  };

  return (
    <div>
      <h2>Component A</h2>
      <p>Shared State: {sharedState}</p>
      <button onClick={handleClick}>Update Shared State</button>
    </div>
  );
}

function ComponentB() {
  const [sharedState] = useSharedState();

  return (
    <div>
      <h2>Component B</h2>
      <p>Shared State: {sharedState}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
    </div>
  );
}

export default App;