Shapes rendered using ThreeJs have shaky/hazy edges

I am trying to render this cube in ThreeJs using basic Box Geometry but the lines are weird and shaky. Even if I set wireframe to false and put a solid cube, the edges of the cube still remain like this.

I am using WebGlRenderer and box geometry for the cube.

    const renderer = new THREE.WebGLRenderer();
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const boxGeo = new THREE.BoxGeometry(2, 2, 2);
    const boxMat = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      wireframe: true,
    });
    const boxMesh = new THREE.Mesh(boxGeo, boxMat);
    scene.add(boxMesh);