Three.js: not able to punch(cut) line shape by using THREE.ExtrudeGeometry

Hello guys I am new to Three.js

I want to punch(cut) some shapes in the plain board by using THREE.ExtrudeGeometry.

Here is my code in snippet.

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 10;
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    var light = new THREE.PointLight(0xffffff, 2, 100);
    light.position.z = 10;
    scene.add(light);
    
    let boardHeight = 100;
    let boardWidth = 100;
    
    const boardShape = new THREE.Shape();
    boardShape.moveTo(0, 0);
    boardShape.lineTo(0, boardHeight);
    boardShape.lineTo(boardWidth, boardHeight);
    boardShape.lineTo(boardWidth, 0);
    boardShape.lineTo(0, 0);
    
    var hole1 = new THREE.Path();
    hole1.moveTo(20, 20); 
    hole1.lineTo(18, 20);
    boardShape.holes.push(hole1);
    hole1 = new THREE.Path(); 
    hole1.moveTo(50, 50);
    hole1.absarc(30, 50, 20, 0.0000, Math.PI*2, true);
    boardShape.holes.push(hole1);
    hole1 = new THREE.Path(); 
    hole1.moveTo(25, 25); 
    hole1.lineTo(27, 25); 
    boardShape.holes.push(hole1);
    
    var material = new THREE.MeshBasicMaterial( { color: 0x005E99 } );
    
    const extrudeSettings = { depth: 1, bevelEnabled: false, bevelSegments: 1, steps: 1, bevelSize: 1, bevelThickness: 1, UVGenerator: THREE.ExtrudeGeometry.WorldUVGenerator };                 
    
    const geometry = new THREE.ExtrudeGeometry(boardShape,  extrudeSettings);
    
    var cube = new THREE.Mesh( geometry, material );
    geometry.scale(0.02, 0.02, 0.02);
    cube.position.set(-boardWidth / 2 * 0.02, -boardHeight / 2 * 0.02, 0.02 * 0.5);
    scene.add( cube );
    
    camera.position.z = 5;
    
    var render = function () {
      requestAnimationFrame( render );    
      //cube.rotation.x += 0.1;
      //cube.rotation.y += 0.1;    
      renderer.render(scene, camera);
    };
    
    render();
    
    // Rotate the mesh based on mouse position
    document.body.onmousemove = function(e){
      //cube.rotation.z = e.pageX / 100;
      //cube.rotation.x = e.pageY / 100;
    }
    
    // Click to toggle wireframe mode
    document.body.onclick = function(e){
      cube.material.wireframe = !cube.material.wireframe;
    }

<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script>
<div id="container"></div>

I have added one circle shape and a two-line shape in the given example.

I can punch hole for circle shape but for line shape it does not work.

I also attached images for current output and expected output

Current Output :

Expected Output:

from Three.js: not able to punch(cut) line shape by using THREE.ExtrudeGeometry