Using async function, await and resolve in React component

I have a component with the following structure:

const _dbCall = () => {
    const fooDb = SQLite.openDatabase(db);
    return new Promise(resolve => {
        fooDb.transaction(tx => {
            tx.executeSql(`SOME SQL`, [], (tx, results) => {
                resolve(results.rows._array);
            }, null);
        });
    })
}

async function _renderSomething() {
    const results = await _dbCall();
    
    return <FlatList
        data={results}
        renderItem={_renderFunc}
        keyExtractor={item => item} />
}

I use _renderSomething() in the render() function of the Component. However, this gives me:

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.

This {_U, _V, _W, _X} looks like an unresolved promise to me. When I remove the async keyword from renderSomething(), comment the const results = ... and pass some dummy data to <FlatList ..., it renders without a problem.

Why does renderSomething() not return the <FlatList ... but an unresolved promise?

As @Yousaf pointed out:

const [resultsFromDb, setResultsFromDb] = useState([]);

const _dbCall = () => {
    const foo = [];
    const fooDb = SQLite.openDatabase(db);
    fooDb.transaction(tx => {
        tx.executeSql(`SOME SQL`, [], (tx, results) => {
            // do something the results
            for (let i = 0; i < results.rows.length; i++) {
                foo.push(results.rows.item(i));
            }
            setResultsFromDb(foo)
        }, null);
    });
}

const _renderSomething = () => {
    const results = _dbCall();
    
    return <FlatList
        data={resultsFromDb}
        renderItem={_renderFunc}
        keyExtractor={item => item} />
}