forward.jsx

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    handleAction() {
      console.log('Action performed in Child');
    }
  }));

  return <div>Child Component</div>;
});

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

  const callChildMethod = () => {
    childRef.current.handleAction();
  };

  return (
    <div>
      <button onClick={callChildMethod}>Call Child Method</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}