Why does not A-Frame show the assets in react?

Question

I'm trying to show gltf model in firebase storage on my website using A-Frame inside React project.

I was able to get the necessary url with firebase SDK function, and I was also able to show the model by passing the url to src in <a-asset-item> like the code below.

However, if I replace the url with {succulentUrl} like <a-asset-item id="suc" src={succulentUrl}></a-asset-item>, A-Frame doesn't show the model anymore, but it doesn't show errors on console either...

I'm guessing the problem is that A-Frame tries to get the model when succulentUrl is still "" before useEffect begins(?)
But I'm new to React and A-Frame, so I don't even know how to fix this if that was the problem.
Could you help me out?

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