react js --将值从子节点传递到父节点，然后再传递给另一个子节点？

// 父组件
import React, { useState } from 'react';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

const ParentComponent = () => {
  const [value, setValue] = useState('');

  const handleValueChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <div>
      <ChildComponent1 onValueChange={handleValueChange} />
      <ChildComponent2 value={value} />
    </div>
  );
};

export default ParentComponent;

// 子组件1
import React from 'react';

const ChildComponent1 = ({ onValueChange }) => {
  const handleChange = (event) => {
    const newValue = event.target.value;
    onValueChange(newValue);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
};

export default ChildComponent1;

// 子组件2
import React from 'react';

const ChildComponent2 = ({ value }) => {
  return (
    <div>{value}</div>
  );
};

export default ChildComponent2;