Input.value does not update - pokemon search app

I am stuck at the start of the pokemon search app development.
The input.value does not update. And after searching for over an hour, I have no idea why. I assume it is something easy I oversee.

both console.logs give an empty row,
the function called onClick gives text: Please write a Pokemon or Pokemon ID.
All this makes me believe that the input value does not update.

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <img id="header-image" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" />
    <h1>Pokémon Search App</h1>
    <div id="application-body">
      <form>
        <label for="search-input">Search for Pokémon Name or ID:</label>
        <div class="row">
          <input id="search-input" type="text" value="" required> </input>
          <button id="search-button" type="submit">Search</button>
        </div>
      </form>
      <div id="name-img-types"> 
        <p id="pokemon-id-stats">
          <span id="pokemon-name">name</span>
          <span id="pokemon-id">ID</span>
        </p>
        <p id="pokemon-basic-stats">
          <span id="weight">Weight</span>
          <span id="height">Height</span>
        </p>
        <div id="pokemon-img"></div>
        <div id="types"></div>
      </div>
      <div id="stats">
        <div class="stats left bold"><p>Base</p></div>
        <div class="stats right bold"><p>Stats</p></div>
        <div class="stats left"><p>HP:</p></div>
        <div class="stats right" id="hp"></div>
        <div class="stats left"><p>Attack:</p></div>
        <div class="stats right" id="attack"></div>
        <div class="stats left"><p>Defense:</p></div>
        <div class="stats right" id="defence"></div>
        <div class="stats left"><p>Sp Attack:</p></div>
        <div class="stats right" id="special-attack"></div>
        <div class="stats left"><p>Sp. Defence:</p></div>
        <div class="stats right" id="special-defense"></div>
        <div class="stats left"><p>Speed:</p></div>
        <div class="stats right" id="speed"></div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

And part of Javascript:

const searchInput = document.getElementById("search-input");
console.log(searchInput.value);

const inputToSearch = searchInput.value.trim().toLowerCase();

console.log(inputToSearch);

const searchPokemon = () => {
  if (!inputToSearch) {
    console.log("Please write a Pokemon or Pokemon ID");
  } else {
    ...
  };
};

searchButton.addEventListener("click", searchPokemon);

searchInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    searchPokemon;
  }
});

if it’s in the global scope it can’t update, do not have inputToSearch in the global scope

Something easy indeed. Thank you so much!