React Three Fiber: Imported 3D Object Renders as Black or Grey Dot

Question

I'm currently working on a project using React and React Three Fiber to import a 3D glTF object onto my website.

However, I'm encountering an issue where the object is only rendering as a black dot, and when I added the ambientLight component, it turned into a grey dot instead of displaying as the intended 3D object.

Here's a snippet of my app.jsx:

import { useState, Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import Earth from "../public/Earth";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Canvas>
        <ambientLight />
        <OrbitControls />
        <Suspense fallback={null}>
          <Earth />
        </Suspense>
      </Canvas>
    </>
  );
}

export default App;

Picture of the gltfx

Struggling to render 3D glTF object in React Three Fiber. Progress so far:

Setup: Initialized React project, imported dependencies.

Integration: Successfully added 3D object to App.jsx.

Lighting: Tried different setups, but caused rendering issues.

Orbit Controls: Added , but without proper object rendering, it's non-functional due to problem.