Promise.all is completely superfluous here.

It is a tool for handling promises that are running in parallel not in series.

The argument you pass to it should be an array of promises. firstResponse and secondResponse are the values that have been unwrapped from promises by await.

Just use firstResponse and secondResponse directly.

const secondResponse = await getSecondResponse();
console.log([firstResponse, secondResponse]);

For that matter, creating the nested async functions and having multiple try/catch blocks that do the same thing just makes the code harder to read.

You can reduce the whole thing down to:

useEffect(() => {
    const asyncFunction = async () => {
        try {
            const firstResponse = await axios.get('http://first-api', {
                params: { carId: id },
            });
            const secondResponse = await axios.get('http://second-api', {
                params: { carName: firstResponse.data?.carName },
            });
            console.log(`values`, [firstResponse, secondResponse]);
        } catch (error) {
            return error;
        }
      }
    asyncFunction();
}, []);

How about you write a custom hook that handles loading and error state so you don't have to rewrite it for each component?

1. Avoid defining complex functions inside of useEffect
2. Separate api calls into individual functions. This makes them reusable in other areas of your app
3. Don't return errors on the resolved branch of your Promise. Instead let them reject and allow the caller to handle appropriately

Let's look at MyComponent. All complexity is removed and the component is only concerned with the three possible states of the asynchronous call -

// MyComponent.js

import { useAsync } from "./hooks"
import { fetchCarWithDetails } from "./api"

function MyComponent({ carId }) {
  const {loading, error, result} =
    useAsync(fetchCarWithDetails, [carId])  // reusable hook

  // loading...
  if (loading)
    return <p>Loading...</p>

  // error...
  if (error)
    return <p>Error: {error.message}</p>

  // result...
  return <pre>
    {JSON.stringify(result, null, 2)}
  </pre>
}

Our reusable api functions are defined in our api module -

// api.js

import axios from "axios"

function fetchCar(carId) {
  return axios
    .get('http://first-api', {params: {carId}})
    .then(r => r.data)
}

function fetchDetails(carName) {
  return axios
    .get('http://second-api', {params: {carName}})
    .then(r => r.data)
}

async function fetchCarWithDetails(carId) {
  const car = await fetchCar(carId)
  const details = await fetchDetails(car.carName)
  return { car, details }
}

export { fetchCar, fetchDetails, fetchCarWithDetails }

Reusable hooks are defined in our hooks module -

// hooks.js

function useAsync(f, [_0, _1, _2, _3, _4]) {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [result, setResult] = useState(null)
  useEffect(_ => {
    setLoading(true)
    Promise.resolve(f(_0, _1, _2, _3, _4))
      .then(setResult, setError)
      .finally(_ => setLoading(false))
  }, [f, _0, _1, _2, _3, _4])
  return {loading, error, result}
}

export { useAsync }

another possible way to get the result using Promise.all, but I like Quentin`s answer

try {
    const responses = await Promise.all([body1, body2].map(async body => {
        return await axios.get(body.endpoint, body.params);
    }))
} catch(error) {
    return error;
}