警告Can't perform a React state update on an unmounted componentを解決したいです。

Question

前提

テキストフォームにキーワードを入力すると、キーワードに沿ったGIFを表示するアプリを作成しています。
下記はサンプルです。
サンプル(CodeSandBox)

GIFの表示はGiphyのSDKを使用しています。
GIPHY SDK for Web

発生している問題・エラーメッセージ

キーワードを素早く入力または削除を繰り返し行なうと、下記の警告がコンソールに表示されます。

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Carousel (at App.tsx:17)
in SearchResult (at App.tsx:28)

実現したいこと

警告を解決し、コンソールに警告が表示されないようにしたいです。

該当のソースコード

const [keyword, setKeyword] = useState("");

const searching = (e: any) => {
  setKeyword(e.target.value);
};

const SearchResult = () => {
  const fetchGifs = (offset: number) =>
    giphyFetch.search(keyword, { offset, limit: 10 });
  return <Carousel fetchGifs={fetchGifs} gifHeight={150} gutter={6} />;
};

return (
  <>
    <input
      type="text"
      onChange={searching}
      style={formStyle}
      placeholder="input keyword"
    />
    <SearchResult />
  </>
);

調べたこと

警告文をGoogle翻訳で翻訳すると下記の内容でした。

警告：マウント解除されたコンポーネントでReact状態の更新を実行できません。
これは何もしませんが、アプリケーションのメモリリークを示しています。
修正するには、componentWillUnmountメソッドですべてのサブスクリプションと非同期タスクをキャンセルします。

警告文にcomponentWillUnmountとあるので、useEffectのreturnでGifの取得を止めればよいのかとは思うのですが、具体的なコードがわかりません。