Extrude geometry not giving the desired result

Questions
1

I am having set of vertices. I am forming a shape out of it and giving input to extrudegeometry. But the output seems not correct.
When I manually join the points, I am able to see it correctly.

This is the code I am using.

var offset = 0,
  l = 20;
const shape = new THREE.Shape();
var vertices = [0, 0, 0.2032, 0, 0.2032, -0.2032, 0, -0.2032, 0, 0, 0.009525, -0.009525, 0.193675, -0.009525, 0.193675, -0.193675, 0.009525, -0.193675, 0.009525, -0.009525]
shape.moveTo(vertices[offset++], vertices[offset++]);
while (offset < l) {
  shape.lineTo(vertices[offset++], vertices[offset++]);
}
if (vertices[0] != vertices[l - 2] || vertices[1] != vertices[l - 1])
  shape.lineTo(vertices[0], vertices[1]);
shape.autoClose = false;
var extrudeSettings = {
  depth: 4,
  bevelEnabled: false
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Can some one help me. I am new to three.js

The output which I am getting is :
image