interact.js resize restriction bug

HTML

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div id="drag"></div>
<div id="firstVerticalLine"></div>

CSS

#drag {
    width: 50px;
    height: 50px;
    background: green;
}
#firstVerticalLine {
    position:absolute;
    height:100%;
    border-right:1px solid black;
    width:0px;
    top: 0px;
    left:200px;
    display:none;
}

JavaScript

var element = document.getElementById('drag'),
    x = 0,
    y = 0;

interact(element)
    .draggable({
    snap: {
        targets: [
        function (x, y) {
            var newX = Math.round(x / 50) * 50;
            var newY = Math.round(y / 50) * 50;
            someFunction(newX, newY);
            return {
                x: newX,
                y: newY
            };
        }],
        range: Infinity,
        relativePoints: [{
            x: 0,
            y: 0
        }]
    }
})
    .on('dragmove', function (event) {
    x += event.dx;
    y += event.dy;

    event.target.style.webkitTransform = event.target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
})
    .on('dragend', function (event) {
        hideFirstVerticalLine();
});

var result = document.getElementById("result");
function someFunction(x, y) {
    if(x == 200 || x == 150) {
        showFirstVerticalLine();      
    } else {
        hideFirstVerticalLine();   
    }
}

var firstVerticalLine = document.getElementById("firstVerticalLine");
function showFirstVerticalLine() {
    firstVerticalLine.style.display = "block";
}

function hideFirstVerticalLine() {
    firstVerticalLine.style.display = "none";   
}