今のところ、検索結果が表示された後でもフォームには入力した文字が残っています。

レシピデータが取得できたときにこれを消したいので、次のコードを追加しましょう。データ取得後にmealNamstateを更新しています。

// App.tsx

            ...
            img: strMealThumb,
            source: strYoutube,
            area: strArea,
            category: strCategory
        })  
        setMealName("")    // 追加
    }

    return (
      ...

フォームをクリアするには、<input>のvalueにmealNameが必要なので、mealNameをForm.tsxに渡します。

// App.tsx

...

<Form setMealName={setMealName}
      getMealData={getMealData}
      mealName={mealName}       // 追加
/>   
<Recipe mealData={mealData}/>
...

型情報を追加します。

// Form.tsx

type FormProps = {
    mealName: string;     // 追加
    setMealName: React.Dispatch<React.SetStateAction<string>>;
    getMealData: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
}
    ...

そしてvalueに書き加えます。

// Form.tsx

...
                // ⬇追加
const Form = ({ mealName, setMealName, getMealData }: FormProps) => {
    return (
        <form onSubmit={getMealData}>
            <input onChange={(e) => setMealName(e.target.value)}
                   type="text" 
                   name="mealName" 
                   placeholder="料理名を英語で入力"
                   value={mealName}      // 追加
                   required
            /> 
            <button>検索</button>
            ...

これで検索後にフォームの入力文字が消えるようになりました。