I'm using async and await, however the result it calling two sets of times, the first set returns the empty default from the useEffect, and then 2nd time returns the correct data from the call.

This is leading to the data not rendering in the component.

import { Grid } from '@material-ui/core';
import React, { useEffect, useState } from 'react';
import { useEasybase } from 'easybase-react';

export default function Data() {

    const [easybaseData, setEasybaseData] = useState([]);

    const { db } = useEasybase();

    const mounted = async() => {
        const ebData = await db("cars").return().limit(1).all();
        setEasybaseData(ebData);
    };

    useEffect(() => {
        mounted();
    }, []);    

    console.log('easybaseData');

    const ez = easybaseData[0]; 

    const i = ez?.image;
    const n = ez?.name;
    const p = ez?.price;

    console.log(i);

    return (
        <Grid item xs={6} id={"outputs-grid"}>
            <div className="image-result-wrapper">
                <img
                    src={`http://localhost:3000/assets/images/${i}`}
                    className="image-result"
                />
                </div>
                <div className="details-result-wrapper">
                <p className="details-result">{n}</p>
                </div>
                <div className="price-result-wrapper">
                <p className="price-result">{`Evaluation: $${p}`}</p>
            </div>
        </Grid>
    )
}

and the console.log:

What am I missing about this? All 3 data for image, name and price are returning undefined in inspector.