Mesh is Not Showing up properly

So here is the code I used to make the mesh

const geometry = new THREE.PlaneBufferGeometry(30, 30, 256, 256);
const material = new THREE.MeshStandardMaterial({
  color: "#303a4a",
  wireframe: false,
  side: THREE.DoubleSide,
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 2;

When I look at it, it looks like this (homogeneous)

side view

top view

There is a bump in the middle but it can’t be seen

Here is my lighting code

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.rotation.x = Math.PI / 2;

const helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );

const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);