Ошибка при попытке отобразить карту элементов

Я пытаюсь выяснить, где моя ошибка на моей странице реакции js

Я пробовал разные вещи, такие как преобразование его в компонент состояния, операторы возврата и рендеринга и т. д. Но это все еще дает мне

"TypeError: Cannot read property 'map' of undefined Recipes src/components/Recipes.js:4 1 | import React from "react"; 2 | 3 | const Recipes = (props) => ( 4 | 5 | { props.recipes.map((recipe)=> { 6 | return ( 7 | View compiled"

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import InputForm from "./components/InputForm";
import Recipes from "./components/Recipes"

const API_KEY= "mykey";

class App extends Component {

  state= {
    recipes: []
  }

  getRecipe  = async (e) => {
  e.preventDefault();
  const recipeName = e.target.elements.recipename.value;
  const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&page=2`)

  const data = await api_call.json();
  this.setState({ recipes: data.recipes });
}
  render() {
    return (
      <div className = "App">
        <header className = "App-header">
          React Cookbook
        </header>
        <InputForm getRecipe = {this.getRecipe} />
       <Recipes recipes = {this.state.recipes} />
      </div>
    );
  }
}

export default App;

Recipes.js

import React from "react";

const Recipes = (props) => (
    <div>
     { props.recipes.map((recipe)=> {
        return (
        <div key = {recipe.recipe_id }>
            <img src = {recipe.image_url} alt = {recipe.title}/>
            <h3>{ recipe.title }</h3>
         </div>
            )
        })}
    </div>
)

export default Recipes;