Почему некорректно работает возврат действий?

Есть рисовалка и в ней нужно реализовать функцию возврата к предыдущему дейстию. Также есть толщина карандаша и его цвет. Если при одном действии выбрать одну толщину/цвет (действием считается непрерывная лиия), а при другом действии другую, то почему то ко всем линиям применится цвет и толщина карандаща предпоследнего действия.

JS

window.onload = () => {
    let config = {
        lineWidth: 5,
        color: 'rgba(0, 0, 0, 1)',
        colorJSON: '{"r":0,"g":0,"b":0,"a":1}'
    }

    let pencilSizeInput = document.querySelector('.pencilSize');
    let pencilOpacityInput = document.querySelector('.pencilOpacity');
    let undoActionBtn = document.querySelector('.undoAction');
    let clearBtn = document.querySelector('.clear');

    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    colorPicker.on('color:change', function(color) {
            config.color = color.rgbaString;
            // config.colorJSON = JSON.stringify(color.rgba);
            //console.log(JSON.stringify(color.rgba));
    });

    function changePencilSize (event) {
        config.lineWidth = pencilSizeInput.value;
    }

    function changePencilOpacity (event) {
        // let rgbaColor;
        // rgbaColor = config.colorJSON;
        // rgbaColor = JSON.parse(rgbaColor);
        // let rgbaColorString;
        // rgbaColorString = `rgba(${rgbaColor.r}, ${rgbaColor.g}, ${rgbaColor.b}, ${pencilOpacityInput.value})`;
        //
        // config.color = rgbaColorString;
        // console.log(rgbaColorString);
        ctx.globalAlpha = pencilOpacityInput.value;
        //console.log(ctx.globalAlpha);
    }

    pencilSizeInput.addEventListener('change', changePencilSize);
    pencilOpacityInput.addEventListener('change', changePencilOpacity);

    canvas.setAttribute('width', 1000);
    canvas.setAttribute('height', 800);

    let pencilLog = {
        currentAction: 0,
        actions: [],
        pencilProperties: {
            lineWidth: [],
            color: []
        }
    }

    canvas.addEventListener("mousedown", function (event) {
        document.querySelector("body").style.overflow = 'hidden';
        ctx.lineWidth = config.lineWidth;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.strokeStyle = config.color;
        ctx.fillStyle = config.color;
        ctx.beginPath();

        pencilLog.actions.push([]);
        pencilLog.pencilProperties.color.push(config.color);
        pencilLog.pencilProperties.lineWidth.push(config.lineWidth);
        canvas.onmousemove = (event) => recordMousePos(event);
    });

    canvas.addEventListener("mouseup", stopDrawing);

    function recordMousePos(event) {
        //console.log(event.clientX + '-' + event.clientY)
        pencilLog.actions[pencilLog.currentAction].push([event.clientX, event.clientY]);
        drawLine(event.clientX + window.pageXOffset, event.clientY + window.pageYOffset);
    }

    function drawLine(x, y) {
        ctx.lineTo(x, y);
        ctx.stroke();
    }

    function stopDrawing() {
        document.querySelector("body").style.overflow = 'visible';
        canvas.onmousemove = null;
        pencilLog.currentAction++;

    }

    function undoAction () {
        if (pencilLog.currentAction !== 0) {
            pencilLog.actions.pop();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            pencilLog.currentAction--;
            ctx.beginPath();

            pencilLog.actions.forEach(function(item, i) {
                console.log(pencilLog.pencilProperties.color[i]);
                ctx.strokeStyle = pencilLog.pencilProperties.color[i];
                ctx.fillStyle = pencilLog.pencilProperties.color[i];
                console.log(ctx.fillStyle);
                ctx.lineWidth = pencilLog.pencilProperties.lineWidth[i];

                item.forEach(function (pos, i) {
                    if (i === 0) {
                        //console.log(pos[0] +'-' + pos[1]);
                        ctx.moveTo(pos[0], pos[1]);
                    }
                    drawLine(pos[0] + window.pageXOffset, pos[1] + window.pageYOffset);
                })
            })
        }
    }

    //Сделать чтобы при открытой консоли разработчика контуры рисовались нормально


    function clear () {
        pencilLog.actions = [];
        pencilLog.currentAction = 0;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    clearBtn.addEventListener('click', clear);
    undoActionBtn.addEventListener('click', undoAction);

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing</title>
    <link rel="icon" type="image/x-icon" href="../../../img/favicon.png">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <script defer src="../../../ColorPicker/iroLibrary.js"></script>
    <script defer src="../../../ColorPicker/colorPicker.js"></script>
</head>
<body>
    <canvas draggable="false"></canvas>
    <div class="undoAction">Обратно</div>
    <div class="clear">Очистить</div>
    <div class="wrapper">
        <div class="colorPicker" id="colorPicker"></div>
    </div>
    <input type="range" name="" id="" class="pencilSize" value="5">
    <input type="range" name="" class="pencilOpacity" value="1" max="1" step="0.01">
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
    border: 3px solid black
}

.undoAction, .clear {
    user-select: none;
    background: blue;
    width: 200px;
    height: 50px;
    border: 3px solid red;
}


.wrapper {
    width: 340px;
    height: 314px;
    background: black;
    border-radius: 15px;

    display: grid;
    align-items: center;
    justify-items: center;
}