const getDetails = async () => {
    setIsLoading(true);
    // setDetails([]);
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
        "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
      },
    };
    await fetch(
      `https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
      options,
      { signal: controller.signal }
    )
      .then(async (response) => await response.json())
      .then(async (response) => await setDetails(response[0])
      )
      
      const cleanUp = () => {
        controller.abort();
        setIsLoading(false);
      };
      return cleanUp();
  };
  useEffect(() => {
    getDetails();
  
  }, [params.id]);