duvidas sobre async

Estou desenvolvendo um projeto pessoal para aprendizado mais estou com um problema, vou mostrar o codigo:

import React from 'react'

import firebase from "firebase/app"
import "firebase/database";
import Foto from './CriaCategoria.js'

// Initialize Firebase
export default function App() {
  let database = firebase.database();

  function lista() {
    const dbRef = database.ref();
    let teste = []

    dbRef.child("categorias").child('Listas').get().then((snapshot) => {
      snapshot.forEach((val) => {
        async function Capa() {
          return await val.val().FotoCapa
        }
        async function Nome() {
          return await val.val().nome
        }
        teste.push({ capa: Capa, nome: Nome })

      })

    })
    return (
      teste
    )
  }
  const children = lista().map((val) => {
    return (
      <Foto nome={val["nome"]} link={val["Foto"]} id={val['nome']} />
    )
  })


  return (
    children
  )
}

preciso bucar alguns links de fotos guardados no firebase Realtime que a função lista() faz para min com o retorno de um objeto, em seguida crio uma constante children que vou pegar o objeto de lista() e usar o map() que me retorna a criação de um elemento img em <Foto />, e por fim no retorno da minha função exportada uso o children. (Não sei se expliquei correto)

O problema, minha constante children não aguarda o função lista() fazer o retorno do objeto e executa com um objeto vazio fazendo com que a constante tenha um retorno vazio, fazendo assim com que não tenha nenhuma imagem para renderizar.

(não sei muito de React e peço desculpas pela desorganização do codigo), quem puder ajudar agradeço, se ficou duvidas sobre a explicação me perguntem, obrigado.