useState is not being set

could you guys please advise why my recipeById state is not being updated even tough i already set the state with the correct value response.data.meals
im able to see the value on response.data.meals but recipeById is always undifined
App.js

  const searchRecipe = async (id) => {
    try {
      setRecipeLoading(true);
      console.log("searchResult idmeal", id);
      const response = await api.get(`lookup.php?i=${id}`);
      console.log(response);
      console.log("response", response.data.meals);
      setRecipeById(response.data.meals);
    } catch (error) {
      console.log("error", error.message);
    } finally {
      console.log("searchRecipe done");
      setRecipeLoading(false);
    }
  };

SearchResult.js

function SearchResult({ searchResult, handleOpen, searchRecipe }) {
  //const { idMeal } = useParams;
  return (
    <>
      {searchResult.map((item) => (
        <div className="topic" id={item.idMeal}>
          <h2 className="topic-name">{item.strMeal}</h2>
          <nav>
            <Link to={item.idMeal} key={item.idMeal}>
              <img
                onClick={() => {
                  searchRecipe(item.idMeal);
                  handleOpen();
                }}
                style={{ width: "80%" }}
                src={item.strMealThumb}
                alt={item.idMeal}
              />
            </Link>
          </nav>
        </div>
      ))}
    </>
  );
}

i tried multiple solution but recipeById is always undifined which is really weird