Как заполнить список карт Ant Design бэкэндом Firebase

Question

PROPS: существует множество идентификаторов, исходящих от реквизита.

[ '61248A6Ad6dd05AD1FA','5AC1f5afF46a0c40Bf4', 'etc...' ]

FIREBASE: есть бэкэнд Firebase, где каждый из этих идентификаторов имеет одинаковые атрибуты.

• 61248A6Ad6dd05AD1FA
  • 'title': 'Book 1'
  • 'author': 'Mark'
• 5AC1f5afF46a0c40Bf4Fe
  • 'title': 'Book 2'
  • 'author': 'Lily'

ANT DESIGN: есть макет по умолчанию для списков карточек.

<List
    dataSource={this.renderBooks()}
    renderItem={item => (
      <List.Item>
        <Card title={item.title}>Book content</Card>
      </List.Item>
    )}
  />

Я пытаюсь перебрать массив и получить соответствующие данные для каждого идентификатора.
Затем заполните мой список в render()

class BooksView extends Component {
    state = {
        title: ''
    }

    renderBooks() {
        const books= this.props.ids.map(book => {
            return firebase.database().ref(`/ids/${book}`).on('value', s => s.val())
        });
        Promise.all(books)
            .then(item => {
                this.setState({title:item});
            });
    }

    render() {
        return (
            <div>
                <List
                    dataSource={this.renderBooks()}
                    renderItem={item => (
                        <List.Item>
                            <Card title={item.title}>Book content</Card>
                        </List.Item>
                    )} />
            </div>
        );
    }
}

export default BooksView;

С помощью state внутри рендера дает мне бесконечные петли.
Другие попытки дали мне неопределенные значения из-за асинхронной природы Firebase.

Как правильно заполнить список, используя обещания и преобразование массива-объекта?