함수 컴포넌트와 필수 Hook에서 setValue({value1:10}) 관련 질문이요!

function App2() {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [value, setValue] = useState({ value1: 0, value2: 0 }); 
  
  const onClick = () => {
    setValue({ value1: 10 });
  };

  return (
    <div>
      Hello App2
      <hr />
      {JSON.stringify(value1)}
      {JSON.stringify(value2)}
      {JSON.stringify(value.value1)}
      <button onClick={onClick}>클릭</button>
    </div>
  );
}

export default App2;

여기서 onClick을 수행할때 왜 value.value1의 값이 변경되는 건가요??
첫번째에 useState(0)으로 만든 value1은 어떻게 해야 값의 변경이 되는거죠??