How to implement Eraser tool in Konva js without using destination-out and drawing with white color we need like object erasing?

Question

enter code hereCan we implement Object Erasing in konva js for eraser tool. Actually i need to erase free drawing line if we erase with destination-out im facing issues while moving or dragging lines from one place to another. To overcome this issue can anyone suggest me how to implement Object eraser in konva js or group the free drawn line and eraser lines.

import React from "react"
import Konva from "konva";
import {Layer, Line, Stage} from "react-konva";
import {CirclePicker} from "react-color";
const Pencil =() => {
    const [tool, setTool] = React.useState("pen");
    const [isDrawing, toggleDrawing] = React.useState(false);
    const [lines, setLines] = React.useState([]);
    const[size,setSize] = React.useState(3);
    const[color,setColor]= React.useState("red");
return(
    <div>
        <CirclePicker  value={color} color={color} onChange = {e=>{
            setColor(e.hex);
        }}/>
        <select
            value={tool}
            onChange={e => {
                setTool(e.target.value);
            }}
        >
            <option value="pen">Pen</option>
            <option value="eraser">Eraser</option>
        </select>
        <input value={size} onChange={e =>{
            setSize(parseInt(e.target.value))
            console.log(setSize)
        }} type='range' step='3' min='3' max='16'/>
    <Stage

        width={window.innerWidth}
        height={window.innerHeight}
        onMouseDown={e => {
            toggleDrawing(true);
            const pointer = e.target.getStage().getPointerPosition();
            const newLines = lines.concat({
                id: Date.now(),
                tool: tool,
                points: [pointer.x, pointer.y]
            });
            setLines(newLines);
        }}
        onMouseMove={e => {
            if (!isDrawing) {
                return;
            }
            const pointer = e.target.getStage().getPointerPosition();
            const newLines = lines.slice();
            const lastLine = {
                ...newLines[newLines.length - 1]
            };
            lastLine.size=size;
            lastLine.color=color;
            lastLine.points = lastLine.points.concat([pointer.x, pointer.y]);
            newLines[newLines.length - 1] = lastLine;
            setLines(newLines);
        }}
        onMouseUp={e => {
            toggleDrawing(false);
        }}>
    <Layer
    >
        {lines.map(line => (
            <Line
                draggable={true}
                x={window.length}
                y={window.length}
                width={window.length}
                height={window.length}
                onDragEnd={e => {
                    e.target.to({
                        // duration: 0.5,
                        // easing: Konva.Easings.ElasticEaseOut,
                        // scaleX: 1,
                        // scaleY: 1,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0
                    });
                }}
                key={line.id}
                strokeWidth={line.size}
                stroke={line.color}
                points={line.points}
                globalCompositeOperation={
                    line.tool === "eraser" ? "destination-out" : "source-over"
                }
            />
        ))}
    </Layer>

    </Stage>
    </div>)



};


export default Pencil;