typescript – React interface array de objetos

Eu estou com impasse na construção de uma função para puxar dados da api.
E o impasse é que quando eu puxo os dados da api ela vem dessa forma

    {
    "name": "Teste",
    "task": (
      {
        "name": "create a new ",
      }
    )
  },

A minha interface é esta:

interface Project {
  name: string;
  task: {
    name: string;
  };
}

Eu criei uma função normal para fazer a requisição e o UseEffect para mudar o estado quando tiver alteração.

  async function getProject() {
    await api.get<Project()>(`project/me`).then((response) => {
      const projectFormatted = response.data.map((project) => {
        return {
         ...
          }),
        };
      });
      setProject(projectFormatted);
    });
  }

Mas quando eu tento fazer dessa forma {project.task.name} dentro de um <h1>, ele simplesmente fica em branco.

Como eu poderia resolver esse impasse, puxando os dados de um array de objetos?