[React] forwardRef + useRef

const Button = forwardRef<CoralButton, ButtonProps>((props, ref) => {
  const { children, onClick, title, ...coralButtonProps } = props;

  const buttonRef = useRef<CoralButton>(null);

  useLayoutEffect(() => {
    if (ref) {
      if (isFunction(ref)) {
        ref(buttonRef.current);
      } else {
        (ref as any).current = buttonRef.current;
      }
    }
  }, [buttonRef]);

  useEffect(() => {
    const button = buttonRef.current!;

    if (onClick) {
      button.addEventListener('click', onClick);

      return () => {
        button.removeEventListener('click', onClick);
      };
    }
  }, [onClick]);

  return (
    <coral-button
      ref={buttonRef}
      title={title}
      {...getCustomElementAttributes(coralButtonProps)}>
      {children}
    </coral-button>
  );
});

Just use useImperativeHandle https://ru.reactjs.org/docs/hooks-reference.html#useimperativehandle

code sample, see ChildInput.tsx component

Thanks!