I'm dealing with a use case where two API calls are made one after the other. The second API call is made by taking a value from the first API call response. I was able to use `Promise.all` with *axios* in my **React** application.

Is there a better way to call the APIs in chain in `useEffect` hook? I'm open to suggestions or recommendations. Could anyone please help?

```
 useEffect(async () => {
    const getFirstResponse = async () => {
      try {
        return await axios.get('http://first-api', {
          params: { carId: id },
        });
      } catch (error) {
        return error;
      }
    };

    const firstResponse = await getFirstResponse();

    const getSecondResponse = async () => {
      try {
        return await axios.get('http://second-api', {
          params: { carName: firstResponse.data?.carName },
        });
      } catch (error) {
        return error;
      }
    };

    const secondResponse = await getSecondResponse();

    Promise.all([firstResponse, secondResponse])
      .then(function (values) {
        console.log(`values`, values);
      })
      .catch(function (err) {
        console.log(err);
      });

  }, []);

```