Workspace.js:15 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'add') of object3D

I am trying to use aframe three.js in react app but I am getting an error. I wrote console.log and got to know my entity.object3D is throwing me as undefined

I don't know what went wrong as aframe and three.js both are new to me

this is my code

import React from "react";

import "aframe";
import sky from "./images/sky.jpeg";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import mountain from "../models/scene.glb";

export default function Workspace() {
  const loader = new GLTFLoader();

  loader.load(mountain, (d) => {
    const entity = document.getElementById("mountain");
    console.log(entity.object3D) // here I am getting undeifned 
    entity.object3D.add(d.scene);
  });

  return (
    <>
      <a-scene>
        <a-assets>
          <img id="sky" src={sky} />
        </a-assets>
        <a-sky color="#FFFFFFF" material="src: #sky" rotation="0 0 0"></a-sky>
        <a-entry id="mountain" position="0 0 0"></a-entry>
      </a-scene>
    </>
  );
}

error message

Workspace.js:15 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'add')