输入在与去抖动、event.persist()和父组件存储值一起使用时不起作用

import React, { useState, useCallback } from 'react';
import _ from 'lodash';

const DebouncedInput = ({ onInputChange }) => {
  const [inputValue, setInputValue] = useState('');

  // 使用useCallback创建一个稳定的去抖动函数
  const debouncedHandleChange = useCallback(
    _.debounce((value) => {
      onInputChange(value);
    }, 300),
    [onInputChange]
  );

  const handleChange = (event) => {
    const value = event.target.value;
    setInputValue(value); // 立即更新本地状态
    event.persist(); // 阻止事件对象池化
    debouncedHandleChange(value); // 调用去抖动函数
  };

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

const ParentComponent = () => {
  const [parentValue, setParentValue] = useState('');

  const handleInputChange = (value) => {
    setParentValue(value);
  };

  return (
    <div>
      <h1>Parent Value: {parentValue}</h1>
      <DebouncedInput onInputChange={handleInputChange} />
    </div>
  );
};

export default ParentComponent;