如何在此UserContext中与useState交互？

import React, { useContext, useState } from 'react';

// 创建UserContext
const UserContext = React.createContext();

// 提供UserContext给组件树
const App = () => {
  const [user, setUser] = useState({ name: 'John', age: 25 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ComponentA />
    </UserContext.Provider>
  );
};

// 使用UserContext的组件
const ComponentA = () => {
  const { user, setUser } = useContext(UserContext);
  const [localState, setLocalState] = useState(user.name);

  const handleUpdateUser = () => {
    setUser({ ...user, name: localState });
  };

  return (
    <div>
      <input value={localState} onChange={(e) => setLocalState(e.target.value)} />
      <button onClick={handleUpdateUser}>Update User</button>
    </div>
  );
};