I'm building a react application with a search bar that gets employee name by querying into an SQL database. In order to reduce the number of queries, I want to implement debounce. I see that not even console log is logging the data as expected. Am unable to crack where is the mistake. Please help me out.

Here is my header or nav bar code

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;