如何在react functional component中将ref const从父组件传递到子组件？

// 父组件
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  // 在父组件中使用ref
  const handleClick = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <button onClick={handleClick}>聚焦子组件</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 在子组件中使用ref
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input type="text" ref={inputRef} />;
});

export default ChildComponent;