Sample for useImperativeHandle

usage.tsx

const Register: FC = props => {
    const formRef = useRef<ImperativeHandleProps>(null!);
    return (
        <Fragment>
            <Form ref={formRef} />
            <button onClick={() => formRef.current.onSomePropFired()}>
                sbt form
            </button>
        </Fragment>
    );
};

useImperativeHandle.tsx

type ImperativeHandleProps = HTMLFormElement & {
    onSomePropFired: () => void;
};
const Form = React.forwardRef<
    ImperativeHandleProps,
    HTMLProps<HTMLFormElement>
>((props, ref) => {
    const formRef = useRef<ImperativeHandleProps>(null!)
    const imperativeHandle = () => {
        return {
            onSomePropFired() {
                console.log("onSomePropFired called");
                formRef.current.focus()
            },
        } as ImperativeHandleProps;
    };

    useImperativeHandle(ref, () => imperativeHandle());

    return <form ref={formRef} {...props}></form>;
});