我应该如何重用useState中的React hooks setX？

const [x, setX] = useState(initialValue);

function ParentComponent() {
  const [x, setX] = useState(0);

  return (
    <div>
      <ChildComponent setX={setX} />
      <button onClick={() => setX(x + 1)}>Increment</button>
    </div>
  );
}

function ChildComponent({ setX }) {
  return (
    <button onClick={() => setX(10)}>Set to 10</button>
  );
}

const SetXContext = React.createContext();

function ParentComponent() {
  const [x, setX] = useState(0);

  return (
    <SetXContext.Provider value={setX}>
      <ChildComponent />
      <button onClick={() => setX(x + 1)}>Increment</button>
    </SetXContext.Provider>
  );
}

function ChildComponent() {
  const setX = useContext(SetXContext);

  return (
    <button onClick={() => setX(10)}>Set to 10</button>
  );
}