Estoy creando una aplicación de reacción con una barra de búsqueda que obtiene el nombre del empleado consultando una base de datos SQL. Para reducir la cantidad de consultas, quiero implementar el rebote. Veo que ni siquiera el registro de la consola está registrando los datos como se esperaba. Soy incapaz de descifrar dónde está el error. Por favor, ayúdame.

Aquí está mi encabezado o código de barras de navegación

 import React, { useState } from "react"; import _ from "lodash"; import styles from "./Header.module.css"; const Header = () => { const [searchName, setSearchName] = useState(""); const searchHandler = (e) => { setSearchName(e.target.value); console.log(searchName); }; const debouncedOnChange = _.debounce(searchHandler, 200); return ( <div className={styles.header}> <div className={styles.left}> <h1>Let's Connect</h1> </div> <div className={styles.right}> <input type="text" placeholder="search for an employee" onChange={debouncedOnChange} value={searchName} /> </div> </div> ); }; export default Header;