React Multiple API Fetch

Question

I'm trying to fetch 2 API's fetchTrending (first), getTrailer (second) in order.

    // Trending Data
    const [content, setContent] = useState([])

    // Trailer Data
    const [trailerLink, setTrailerLink] = useState([])

    // Loading State
    const [loading, setLoading] = useState(true)

    // Fetching Trending Data (content)
    const fetchTrending = async () => {
        const { data } = await axios.get(`${TRENDING}${process.env.REACT_APP_API_KEY}`);
        setContent(data.results);
        console.log(content[0])
        getTrailer(content[0]?.media_type, content[0]?.id)
    }

    // Fetching Trailer Data (trailerLink)
    const getTrailer = async (media_type, id) => {
        const { data } = await axios.get(`${baseURL}/${media_type}/${id}/videos?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`)
        const filteredData = data.results.filter(search => search.type === "Trailer")
        setTrailerLink(filteredData[0])
        console.log(media_type, id)
        console.log(trailerLink)
    }

    useEffect(() => {

        fetchTrending()
        setTimeout(() => setLoading(false), 3000)
    }, [])

Once the page loads, I'm getting trailerLink value as undefined.

If I make any changes in the jsx file and click save, trailerLink updates to it's right value.

But if I reload the page, same issue occurs.