● Reactの関数コンポーネントで親コンポーネントから子コンポーネントの関数を実行する

forwardRef , useImperativeHandle を使います

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

https://react.dev/reference/react/useImperativeHandle

useImperativeHandle は forwardRef と組み合わせて使います。
useImperativeHandle は コンポーネントにメソッドを生やす Hooks です

● 子コンポーネントで関数 showAlert() を登録

1. メソッドの追加

import { useImperativeHandle, forwardRef } from "react";

    useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("Child Function Called")
            }
        }),
    )

2. refを受け取れるようにする

const MyChildComponent = (props) => {

　　　　　　↓

const MyChildComponent = (props, ref) => {

export default MyParentComponent;

　　　　　　↓

export default forwardRef(MyParentComponent);

● 親コンポーネントで ref を渡す

import { useRef } from "react";

const childRef = useRef();

<MyChildComponent
    ref={childRef}
/>

後は親コンポーネントの好きなところから関数を呼ぶことができます

<button type="button"
    onClick={ () => { childRef.current.showAlert() }}
>

関数コンポーネントはクラスとどう違うのか? — Overreacted

● useImperativeHandle を async で使用したい

子コンポーネントのuseImperativeHandle を次のようにします。

    useImperativeHandle(
        ref,
        () => (
            {
                showAlert:  async function(){ await showAlert(); } ,
            }
        )
    )

また showAlert() 関数にも async をつけておきます

● TypeScript で useImperativeHandle を使用する例

ForwardRefRenderFunction　を使います

import React, { useImperativeHandle, forwardRef } from "react";

interface Props {
  text: string;
}

interface Handler {
  showAlert(): void;
}

const ChildBase: React.ForwardRefRenderFunction<Handler, Props> = (
  props,
  ref
) => {
  // 公開する関数
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert(props.text);
    },
  }));

  return <span>{props.text}</span>;
};

const VFCChild = forwardRef(ChildBase);
export default VFCChild;