如何在Reactjs中给两个组件各自的状态？

// 组件A
import React, { useState } from 'react';
import ComponentB from './ComponentB';

const ComponentA = () => {
  const [stateA, setStateA] = useState('Initial Value A');

  return (
    <div>
      <h2>Component A</h2>
      <p>State A: {stateA}</p>
      <ComponentB stateA={stateA} />
    </div>
  );
};

export default ComponentA;

// 组件B
import React, { useState } from 'react';

const ComponentB = (props) => {
  const [stateB, setStateB] = useState('Initial Value B');

  return (
    <div>
      <h2>Component B</h2>
      <p>State B: {stateB}</p>
      <p>State A from Component A: {props.stateA}</p>
    </div>
  );
};

export default ComponentB;