为什么更改子组件中的状态(基于道具)会影响道具？

import React, { useState } from 'react';

function ParentComponent() {
  const [parentState, setParentState] = useState('initial state');

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Parent State: {parentState}</p>
      <ChildComponent state={parentState} setState={setParentState} />
    </div>
  );
}

function ChildComponent({ state, setState }) {
  const handleChange = () => {
    setState('new state');
  };

  return (
    <div>
      <h2>Child Component</h2>
      <p>Child State: {state}</p>
      <button onClick={handleChange}>Change State</button>
    </div>
  );
}

export default ParentComponent;

function ChildComponent() {
  const [childState, setChildState] = useState('initial state');

  return (
    <div>
      <h2>Child Component</h2>
      <p>Child State: {childState}</p>
      <button onClick={() => setChildState('new state')}>Change State</button>
    </div>
  );
}

function ParentComponent() {
  const [parentState, setParentState] = useState('initial state');

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Parent State: {parentState}</p>
      <ChildComponent onStateChange={setParentState} />
    </div>
  );
}

function ChildComponent({ onStateChange }) {
  const handleChange = () => {
    onStateChange('new state');
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={handleChange}>Change State</button>
    </div>
  );
}