react async problemi

function Recipe() {
  const [details, setDetails] = useState([]);
  const [activeTabs, setActiveTabs] = useState("ingredients");
  const [isLoading, setIsLoading] = useState(false);
  const params = useParams();
  let isMounted = null;
  useEffect(() => {
    isMounted=true;
    const source = axios.CancelToken.source();
    const getDetails = async () => {
  
      const options = {
        method: "GET",
        url:`https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
        headers: {
          "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
          "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
        },
        cancelToken: source.token,
      };
  
        setIsLoading(true);
        try {
           await axios.request(options).then((response)=> response.data[0]
          ).then((res)=>{
            if (isMounted) {
              setDetails(res);
               console.log(details)
             }
          })
          
        } catch (err) {
          if (isMounted) {
            setDetails([]);
             console.log(err.message)
          }
        } finally {
           setIsLoading(false);
           console.log('params id: '+params.id+ ' details id: '+details.id)
        }
  
        const cleanUp = ()=>{
          isMounted=false;
          source.cancel();
          
        }
        return cleanUp;
      
      
    }
    getDetails();
  
  }, [params.id]);

  
  return (
    <DetailWrapper>
      {isLoading && <p>...Loading</p>}
      {!isLoading &&  details.id==params.id && <DisplayRecipe params={params.id} details={details} activeTabs={activeTabs} setActiveTabs={setActiveTabs} Button={Button}/>}
    </DetailWrapper>
  );
}

onst 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((response) => response.json())
      .then((response) => {
         setDetails(response[0]);
        console.log(response[0]);
         console.log(params.id)
      }).then(()=> {
      setIsLoading(false)
     })
  };
  useEffect(() => {
    getDetails();
    controller.abort()
  }, [params.id]);