Cannot clear input field even though tried dozens of methods

I want to clear km and persons and I tried it in different ways like inp1 = null, inp1 = isNaN, inp1 = "" (the same with inp2) and with appending innerHTML and or .value on the end and further the same with km and persons but none of these methods worked. The clearing should happen after several seconds like I described in my sub- function "clear" which is a parameter of the setTimeOut function. The clear() function should happen when someone is inserting a number over four in the persons field

<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>Document</title>
<script>
function calci() {
    const {routePrice, km, persons, output} = VarOfElements();
  
    const condExceededPersons = persons > 4;
    const condPersonsCosts = persons === 4 && km > 0;
    const condNonePersonsCosts = persons < 4 || !isNaN(persons);
  
    if (condExceededPersons) {
      output.innerHTML = "Only four persons can drive with you!";
      setTimeout(clear,3500);
      function clear() {
    output.innerHTML = "Please enter adequate informations";
    km = null
    persons = null
      } 
      return; /*the above area is to considering and the function under the calci function in which the elements are declared*/
    } else if (condPersonsCosts) {
      var personsExpenses = 5;
    } else if (condNonePersonsCosts) {
      personsExpenses = 0;
    }
    const noInput = isNaN(km);
    if (noInput) {
      output.innerHTML = "Please enter a distance"; 
      return;
    }
    const conditionSevenO = km <= 7 && km > 0;
    const overSevenOeq = km > 7 && km > 0;
  
    if (conditionSevenO) {
      y = 3.9
      var wholeExpenses = routePrice * km + y + personsExpenses;
      output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
    } else if (overSevenOeq) {
      y = 3.9
      let sevenLess = km - 7;
      let overSevenRoute = 1.65;
      let overSeven = sevenLess * overSevenRoute;
      let seventhExpenses = 16.10;
      wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
      output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
    }
  }
  
function VarOfElements() {
    var routePrice = 2.3;
    const inp1 = document.getElementById('input-box1');
    const inp2 = document.getElementById('input-box2');
    const km = parseInt(inp1.value);
    var persons = parseInt(inp2.value);
    output = document.getElementById('output-box');
    return {routePrice, km, persons, output, inp1,inp2};
  };
</script>


</head>
<style>


.body {
    display: flex;
    justify-content: center;
    font-family: 'Padauk', sans-serif;
    
}

#heading {
    color: rgba(130, 195, 236, 1);
}

#boxes {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 20vh;
    align-items: center;
    gap: 30px;
    
}

#input-box1:focus, #input-box2:focus {
   border: none;
    box-shadow: rgb(10, 126, 179) 0 0 10px ;
}


#boxes>*:nth-child(4) {
 margin-top: 1vh;
}

#boxes>*:nth-child(5) {
    margin-top:-1vh;
   }


   .input {
    background-color: rgba(152, 187, 209, 0.386);
    border: 1px solid;
    border-radius: 5px;
    border-color: rgba(130, 195, 236, 1);
}

.box {
    width: 32vh;
    height: 5vh;
    text-align: center;
    
}

#output-box {
border: 1px solid;
border-radius: 30px;
border-color: rgb(10, 126, 179);
background-color: rgba(64, 143, 193, 0.453);
color: rgba(29, 2, 54, 0.311);
line-height:40px;
text-align: center;
box-shadow: blueviolet 0 0 10px;

}



::placeholder {
    color: rgba(0, 0, 0, 0.232);
}
#button {
    border: 1px solid;
    border-radius: 5px;
    background-color: rgba(152, 187, 209, 0.386);
    border-color: rgba(130, 195, 236, 1);
    color: rgba(52, 160, 228, 0.588);
    box-shadow: 0 0 10px rgba(130, 195, 236, 1);
    cursor: pointer;
}

#button:hover {
    color: white;
}


</style>
<body>




  <div id="boxes">
    <h1 id="heading"> Taximeter</h1>
    <label class="labels" id="km" for="input-box1">km</label>
    <input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1"
    class="box input" type="number">
    
    <label class="labels" id="personen" for="input-box2"> Passengers </label>
    <input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0"
    placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
    
    <label class="labels" id="Preis" for="output-box">Price</label>
    <output placeholder = "Please enter informations" class="box" id="output-box"></output>
    
    <button onclick="calci()" id="button"> calculate!</button>
  </div>

  
  </div>
</body>
</html>