Estoy usando async y await , sin embargo, el resultado llama dos conjuntos de veces, el primer conjunto devuelve el valor predeterminado vacío de useEffect , y luego la segunda vez devuelve los datos correctos de la llamada.

Esto hace que los datos no se representen en el componente.

 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> ) }

y la consola.log:

¿Qué me estoy perdiendo de esto? Los 3 datos de imagen, nombre y precio se devuelven sin definir en el inspector.