Modifying the input triggers the listener with a value that includes the latest user input

For example, if the input is 10 and the user types 1, the detected value becomes 101, which is greater than 50. The value is then set to 50, but on the next detection, it changes to 501 instead of staying at 50.

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('input', function(event) {
  let value = Number(event.target.value)
  console.log(value)
  if (value > 50) {
    event.target.value = 50
    console.log("It cannot be greater than 50");
  }
});

<input type="text" id="myInput" placeholder="Type something...">

My input is:’1′ -> ‘0’ -> ‘1’;

The output I get is:
2test.html:8 1
2test.html:8 10
test.html:8 101
test.html:11 It cannot be greater than 50
test.html:8 501
test.html:11 It cannot be greater than 50