Why is my component not rendering items with UseState on React project?

React rookie here! I’m building a React API application that takes ingredients and displays the recipes you can make. After the ingredients are entered I would like the recipes and the relevant links to both immediately show up on my screen. I have to run two fetch requests, one to get the recipes array and another to get the links, which are then added to the recipe array.

I understand that useState is async, and I was able to get the recipe name and pictures to render immediately by declaring another value. But I cant do the same with the links, they will not show unless I save my work after entering ingredients. Is there something I can add here to have everything render all at once?

    const [shownRecipes, setShownRecipes] = useState([]);


    const addIngredient = (ingredient) => {
        let value = document.getElementById('name').value
        let ingredientObject = {}
        
        if ( value.trim() !== ''){
        ingredientObject.id = uniqid()
        ingredients.push(ingredientObject)
        setIngredients([...ingredients])
        combineIngredients(ingredients)
        document.getElementById('name').value = ''
        }
    }

    **const combineIngredients = (ingredients) => {
        let urlIngredientArray = '';
        for (let i =0; i < ingredients.length; i++) {
            urlIngredientArray += ingredients[i].name + ',+'
        }

        let newUrl = 'https:api.spoonacular.com/recipes/findByIngredients&ingredients=' + urlIngredientArray.toLowerCase() + '&number=3' ; 
        
        fetch(newUrl) 
    
        .then(function(result) {
            return result.json();
        })
        

        .then(function(result) {
            getRecipeUrl(result)
            setRecipes([...result])
        });
    }**

    
   ** const getRecipeUrl = (array) => {
        for (let i = 0; i < array.length; i++){
        
        let recipeId = array[i].id
        let recipeUrl = 'https:api.spoonacular.com/recipes/' + recipeId + '/information'; 
        
        fetch(recipeUrl) 
    
        .then(function(response) {
            return response.json();
        })
        
        .then(function(response) {
            array[i].link = response.sourceUrl
            // setRecipes({...response})
        });
        
    }
    }**
    return (
        <div id="content-container">
            <div id='search-content'>
                <div id='search-items'>
                    <input id='name' type='text' defaultValue='' placeholder='Type your ingredient'/>
                    <div id='button-container'>
                        <input id='ingredient-button' type='button' value='Add' onClick={() => addIngredient(document.getElementById('name').value)}/>
                        <input id='ingredient-button' type='button' value='Delete All' onClick={() => deleteAllIngredients(ingredients)}/>
                    </div>
                </div>
                <input id='submit-button' type='button' value='Search Recipes' onClick={() => searchRecipes(recipes)}/>
                <div id='ingredient-list'>
                    {ingredients.map((ingredient) => {
                        return (<div key={ingredient.id} 
                                id={ingredient.id}
                                className='ingredient-container'
                                onClick={() => deleteIngredient(ingredient)}>
                                <div className='ingredient-name'>{ingredient.name}</div>
                        </div>
                        )
                    })}
                </div>
            </div>
            <div id='recipe-results'>
                    {shownRecipes.map((recipe) => {
                        return (<div key={recipe.id} 
                                className='recipe-container'>
                                <img className='recipe-image' src={recipe.image}></img>
                                <div className='recipe-content-container'>
                                    <div className='recipe-name'>{recipe.title}</div>
                                    <div className ='recipe-url'>Link to recipe: {recipe.link}</div>
                                </div>
                        </div>
                        )
                    })}
            </div>
        </div>
    )
}