Estoy tratando de mostrar el modelo gltf en el almacenamiento de firebase en mi sitio web usando A-Frame dentro del proyecto React.

Pude obtener la URL necesaria con la función Firebase SDK, y también pude mostrar el modelo pasando la URL a src en <a-asset-item> como el código a continuación.

Sin embargo, si reemplazo la URL con {succulentUrl} como <a-asset-item id="suc" src={succulentUrl}></a-asset-item> , A-Frame ya no muestra el modelo, pero tampoco muestra errores en consola...

Supongo que el problema es que A-Frame intenta obtener el modelo cuando succulentUrl sigue siendo "" antes de que useEffect comience (?)
Pero soy nuevo en React y A-Frame, así que ni siquiera sé cómo solucionarlo si ese fuera el problema.
¿Podrías ayudarme?

 function Scene() { const [succulentUrl, setSucculentUrl] = useState(""); useEffect(() => { getDownloadURL(ref(storage, 'items/xXFE1kWtHVQ9UUnreaGLDiJ4A1K2/SPIKED_SUCCULENT_5K.gltf')) .then((url) => { setSucculentUrl(url); console.log(url); }) .catch((error) => { console.log(error.message); }); }, []); return ( <div className="w-full h-full"> <a-scene embedded> <a-assets> <a-asset-item id="suc" src="https://firebasestorage.googleapis.com/v0/b/vrshop-100.appspot.com/o/items%2FxXFE1kWtHVQ9UUnreaGLDiJ4A1K2%2FSPIKED_SUCCULENT_5K.gltf?alt=media&token=75df9f74-38cd-4f26-ab6a-9cd09a4c1620"></a-asset-item> </a-assets> <a-gltf-model position="1 0.5 -3" src="#suc"></a-gltf-model> </a-scene> </div> ); }