无法在react中将表单输入值从函数传递到组件

import React, { useState } from 'react';

// 子组件，用于显示传递过来的值
function DisplayValue({ value }) {
  return <div>输入的值是: {value}</div>;
}

// 父组件，包含表单和子组件
function FormComponent() {
  const [inputValue, setInputValue] = useState('');

  // 处理表单输入变化的函数
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <DisplayValue value={inputValue} />
    </div>
  );
}

export default FormComponent;