Using navigate react-router v6 in statement - reactjs

Question

I used navigate in react-router v6. But It doesn't navigate to /search. I got data from API and want to compare it with the value of the search bar. If they are equal, navigate to /search; if they're not, navigate to /searchNull .I checked in the console. They were equal. But It is always navigated to /searchNull path. Do you have any solution?
SearchInput.js
import "./SearchInput.css";
import Search from "../../../assets/Images/icon/search-normal.svg";
import { useNavigate } from "react-router-dom";
import { React , useRef , useState } from "react";
import { useAppContext } from "../../../Context/SearchContext/SearchContext";
const SearchInput =(props)=>{
const [inputChange , setInputChanage ] =useState("");
const inputRef = useRef(null);
const navigate = useNavigate();
const {setSearchValue , bookData } = useAppContext();
const inputChangeHandler = (event) => {
setInputChanage(event.target.value)
};
const handleKeyDown = (event) => {
if (event.key === "Enter"){
setSearchValue(inputRef.current.value);
bookData.map((item) => {
if( item.name.toString() === inputChange.toString()){
navigate("/search");
}
else{
navigate("/searchNull")
}
})
}
}
return(
<div className="search-input-container">
<input
className="search-input"
ref={inputRef}
onChange={inputChangeHandler}
value={inputChange} type="text"
onKeyDown={handleKeyDown} placeholder= {props.placeholder}
/>
<button className="search-icon" onClick={handleClick}>
<img src={Search} width="100%" height="100%" alt="search icon" />
</button>
</div>
)
export default SearchInput;
I called API in Context.js :
import React, { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";
const CoinsContext = createContext({});
const SearchContext = ({ children }) => {
const [searchValue, setSearchValue] = useState(' ');
const [bookData , setBookData ] = useState([]);
useEffect(()=>{
axios
.post('/books/list/all').then((response)=>{
const bookApi = [];
response.data.data.map((item)=>{
bookApi.push({
id:item.id,
name:item.name,
})
})
setBookData(bookApi)
})
},[])
return (
<CoinsContext.Provider value={{ searchValue, setSearchValue ,bookData ,setBookData
}}>
{children}
</CoinsContext.Provider>
);
};
export const useAppContext = () => useContext(CoinsContext);
export default SearchContext;