async/awaitを用いたデータ取得

前提

todoアプリを作成しており、todoの初期値として
https://jsonplaceholder.typicode.com/todos/1
のtitleオブジェクトを設定したい

そのために該当のtitleオブジェクトを返すカスタムフックを作成している

※アプリは別のファイルで作成しており、実装を検証するためにカスタムフックのみcodesandboxで作成している状況です

実現したいこと

App.js内のconsole.log(initialTodo)にuseStateの初期値(undifined)がまず渡ってくるのを回避したい
⇨カスタムフック内のasync/awaitを用いたデータ取得で用いたtodoTitleがinitialTodoにまず渡ってくるようにしたい

質問内容

・前提（再掲）
実際のアプリではinitialTodoが、todo一覧のstateに初期値として設定されるような仕様を予定しています
現状のカスタムフックだと、initialTodoの初期値であるundifinedがtodo一覧の初期値に渡る仕様となってしまい、これを回避したいと考えています。

・質問内容
以下の2通りで回避策を考えてみましたが①は冗長、②はイメージがわかないので、②のサンプルコードないしその他の回避策があればご教示いただきたいです🙇‍♀️

①initialTodoのstateを定義する場所を変える（async/awaitでデータを取得した後にする）

②initialTodoがundifinedならtodo一覧の初期値から外すという実装にする

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

undifined（useStateの初期値)がconsole.logに出力される

該当のソースコード

https://codesandbox.io/s/jian-zheng-9swbmx?file=/src/App.js

※実装予定のアプリのコードは下記です
https://github.com/yuki96422/react-todo

App.js

import "./styles.css";
import useInitialTodo from "./useInitialTodo";

export default function App() {
  const [initialTodo] = useInitialTodo();
  console.log(initialTodo);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{initialTodo}</h2>
    </div>
  );
}

useInitialTodo.jsx

import axios from "axios";
import { useState, useEffect } from "react";

const useInitialTodo = () => {
  const [initialTodo, setInitialTodo] = useState();
  useEffect(
    () => async () => {
      try {
        const result = await axios.get(
          "https://jsonplaceholder.typicode.com/todos/1"
        );
        const todoTitle = result.data.title;
        setInitialTodo(todoTitle);
      } catch (err) {
        alert("error");
      }
    },
    []
  );

  return [initialTodo];
};

export default useInitialTodo;