onChange event doesn't get fired

Question

I'm trying to make a search bar and suggestions list, when a suggestion is clicked the value of the input box should change to the value of the suggestion element and that happens indeed. input box have an onChange event which fires a handleChange function. That works and the onChange event usually get fired. But when the input changes due to clicking a suggestion the onChange function doesn't get fired

Here is the code

import "./App.css";
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {

  var [searchTerm, setSearchTerm] = useState("");

function handleSearchTerm(event) {
    const newValue = event.target.value;
    setSearchTerm(event.target.value); //the rest of the function};

const changeInput = (event) => { //the function that is supposed to get fired
    setSearchTerm(event);
  };
return(
    <div className="App">
      <input
        type="text"
        value={searchTerm}
        onChange={handleSearchTerm}
        className="input"
      ></input>
      <div className="dropdown">
        {filteredList  //the array that handles the search
          .filter((item) => {
            const value = searchTerm.toLowerCase();
            const fullName = item.title.toLowerCase();

            return value && fullName.startsWith(value) && fullName !== value;
          })
          .slice(0, 10)
          .map((item) => (
            <div
              onClick={() => changeInput(item.title)}
              className="dropdown-row"
              key={item.title}
            >
              {item.title}
            </div>
          ))}

      </div>
    </div>

)
}