Function isn’t getting triggered onClick isn’t working on dropdown

OnClick isn’t working in div dropdown functionality

<div  onClick={()=>console.log('hello')}  key={item} className="text-white  hover:bg-slate-700 hover:cursor-pointer">

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { toggleMenu } from "../utils/AppSlice";
import search_icon from "../assets/download.png";
import { autosuggest } from "../utils/constants";
import { cacheResults, removecacheResults } from "../utils/searchSlice";

const Header = () => {
  const dispatch = useDispatch();
  const [searchText, setsearchText] = useState("");
  const [searchapiText, setsearchapiText] = useState([]);
  const [showserchResults, setshowserchResults] = useState(false);
  const [LRU, setLRU] = useState([]);
  const [pops, setpop] = useState(null);

  const cache = useSelector((store) => store.search.searchState);
  // console.log(cache)
  const handleclick = () => {
    dispatch(toggleMenu());
  };

  const handleitemClick =() =>{
    console.log('tiem')
    // setsearchText(item)
  }
  const autosuggestionsapi = async () => {
    const autosuggestions = autosuggest + searchText;
    // console.log('API Call - '+searchText)
    const api = await fetch(autosuggestions);
    const json_data = await api.json();
    setsearchapiText(json_data[1]);

    if (LRU.length >= 6) {
      setLRU((prevItems) => {
        const poppedElement = prevItems[0];
        setpop(poppedElement);
        const updatedElement = prevItems.slice(1);
        return updatedElement;
      });
    }
    setLRU((items) => {
      const newitems = items;
      newitems.push(searchText);
      return newitems;
    });
    dispatch(
      cacheResults({
        [searchText]: json_data[1],
      }),
    );
  };
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      window.location.href = `/search?q=${searchText}`;  
    }
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      if (cache[searchText]) {
        setsearchapiText(cache[searchText]);
      } else {
        autosuggestionsapi();
      }
    }, 200);
    if (pops !== null) {
      const updatedCache = { ...cache };
      delete updatedCache[pops];
      dispatch(removecacheResults(updatedCache));
      setpop(null);
    }
    return () => {
      clearTimeout(timer);
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchText, pops]);
  return (
    <div className="fixed w-screen z-10">
      <div className="grid grid-cols-12 bg-black shadow-lg py-2 px-4 ">
        <div className="md:col-span-2 col-span-3 flex">
          <img
            onClick={() => handleclick()}
            className="md:h-7 h-6  md:mt-4 mt-5 cursor-pointer rounded-full"
            alt="hamburger"
            src="some_image"
          />
          <a href="/">
            <img
              className="h-16"
              alt="logo"
              src="some_image"
            />
          </a>
        </div>
        <div className="md:col-span-9 col-span-7 md:-ml-0 -ml-28">
          <div className="flex ">
            <input
              value={searchText}
              onChange={(e) => setsearchText(e.target.value)}
              onFocus={() => {
                setshowserchResults(true);
              }}
              onKeyPress={handleKeyPress}  
              onBlur={() => setshowserchResults(false)}
              className="h-10 mt-3 w-1/2 ml-28 rounded-l-full border border-gray-500 text-gray-500 px-5 py-2 bg-black"
              placeholder="Search"
              type="text"
            />

            <a href={"/search?q="+searchText}>
              <button className="mt-3">
                <img
                  alt="search"
                  className="md:h-[2.6rem] h-[2.5rem] border  border-gray-500 rounded-r-full bg-gray-900"
                  src={search_icon}
                />
              </button>
            </a>
          </div>
          {**showserchResults && searchapiText.length > 0 && (
            <div className="flex flex-col gap-1 rounded-lg fixed bg-custom-grey w-[16rem] md:w-[18rem] lg:w-[25rem] xl:w-[33rem] z-10 ml-28 md:ml-32 px-7 py-2 mt-2">
              {searchapiText.map((item) => (
                <div  onClick={()=>console.log('hello')}  key={item} className="text-white  hover:bg-slate-700 hover:cursor-pointer">
                  {' '+item}
                </div>
              ))}**
            </div>
          )}
        </div>

        <div className="flex md:col-span-1 col-span-2 md:mt-0 mt-1 ">
          <img
            className="h-8 mt-3 rounded-full"
            alt="user-icon"
            src="some_image"
          />
        </div>
      </div>
    </div>
  );
};

export default Header;