react-three-fiber object looks in grey color

I’ve been using React.js with @react-three/fiber library.

And following some tutorials, I faced this issue.

All object color rendered in grey color as follows:

grey color rendered image

Here’s my code:

// App.js

import React, { Suspense } from "react"
import styled from "styled-components"
import { Canvas } from "@react-three/fiber"
import { OrbitControls, Stars } from "@react-three/drei"

const AppContainer = styled.div`
  width: 100%;
  height: 100%;
`

function App() {
  return (
    <AppContainer>
      <Canvas>
        <Suspense fallback={<div>Loading...</div>}>
          <ambientLight intensity={0.5} />
          <mesh>
            <Stars />
            <OrbitControls />
            <sphereGeometry args={[2, 16, 16]} attach="geometry">
              <meshPhongMaterial color="red" attach="material" />
            </sphereGeometry>
          </mesh>
        </Suspense>
      </Canvas>
    </AppContainer>
  )
}

export default App

// index.js

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root"),
)

reportWebVitals()

And if I change some index.css attributes,

/* index.css */

#root {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

as above,

background color changed

background’s color has been changed.

But I wonder why this happens… why is it in grey color?