Not able to access more than 2 food recipe requests at a time from edamam api

Question

I am creating a recipe search application using react and edamam API but I am not able to access more than 2 food recipe requests at a time from edamam API while for free usage we can access up to 10 different food recipes. Pls tell what I am doing wrong that I am not able to search for more than 2 food options also the first food recipes which is by default being displayed is correct but if I add something else to search say banana then it does not give banana food recipes instead something else is given.

    import React, { useEffect, useState } from 'react';
    import './App.css';
    import Recipe from './Recipe';

   const App = () => {
     
    // Declare state as an empty array bcoz recipe and its data are present 
   in an array 

    const[recipes,setRecipes] =useState([]);
    const[search,setSearch] = useState("");
    const[searchSubmit,setSearchSubmit] = useState('pizza'); //set ice-cream 
     as default value

    //call the getREcipes fxn when the page renders for the first time
    useEffect(() => {
       getRecipes();
    },[searchSubmit]);

    // getRecipes fxn 
    const getRecipes = async () => {
       const response = await fetch(`https://api.edamam.com/search? 
       q=${searchSubmit}&app_id=${APP_ID}&app_key=${APP_KEY}`);
       const data = await response.json();
       setRecipes(data.hits);
       console.log(data.hits);
    }

    const getSearch = (e) => {
      e.preventDefault(); //to stop the page refresh
      setSearchSubmit('search');
      setSearch("");
    }
    //the event e here is a event whenever the input text in the search bar 
    changes

    const updateSearch = (e) => {
       setSearch(e.target.value);
    }

     return (
      <div className ="App">
        <form onSubmit = {getSearch} className="search-bar">
          <input className="search-field" type ="text" value={search} onChange={updateSearch}/>
          <button className="search-btn" type="submit">Search</button>
        </form>
    
        {
          recipes.map(recipe => (   //for each recipe in the recipes array create a recipe component
          <Recipe 
          key = {recipe.recipe.label}
          title = {recipe.recipe.label} 
          calories = {recipe.recipe.calories}
          time = {recipe.recipe.totalTime} 
          image = {recipe.recipe.image}/>
        ))}
        
      </div>
      );
    }

  export default App;

this is the first time when page loads

this is when i type banana in search field, but i am not getting any recipes related to banana or anything else if i type. i get this only irrespective of the input given