Функция поиска не передает функцию React

Question

Используя poke Api, я хочу иметь возможность поиска по любому покемону, введенному в форму поиска.

Когда я вхожу в покемона, он ничего не возвращает компоненту отображения. Используя инструменты Dev (вкладка сети), я вижу, что объект ответа возвращается. Я не могу понять, почему это не рендеринг. Я проверил вызов перед тем, как добавить функцию поиска ранее, предоставив жестко закодированное значение для конечной точки, и оно отображалось очень хорошо.

Компонент приложения

class App extends Component {
    state = {
        pokemonData: {},
        pics: {}
    }

    searchPokemon(pokemon) {
        fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`)
            .then(response => response.json())
            .then(data => this.setState({pokemonData: data, pics: data.sprites}))
            .catch(error => `Error fetching and parsing data ${error}`)
    }

    render() {
        return (
            <>
                <Header/>
                <Container className="main-container">
                    <Container className="search-container">
                        <Pokeform onSearch={this.searchPokemon}/>
                    </Container>
                    <Container className="display-container">
                        <Display data={this.state.pokemonData} type={this.state.types} pics={this.state.pics}/>
                    </Container>
                </Container>

            </>
        );
    }
}

Компонент Form и Display оба являются отдельными файлами конечно.

    state = {
        searchText: ''
    }

    onSearchChange = e => {
        this.setState({searchText: e.target.value})
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.onSearch(this.state.searchText);
        e.currentTarget.reset();
    }

    render() {console.log(this.props.onSearch(this.state.searchText));
        return (
            <>
                <Form className="poke-form" onSubmit={this.handleSubmit}>
                    <Form.Group controlId="formBasicEmail">
                        <Form.Label>Enter Pokemon Name</Form.Label>
                        <Form.Control
                            className="search-input"
                            type="search"
                            onChange={this.onSearchChange}
                            placeholder="Who are you searching for..."
                            name="search"
                        />
                    </Form.Group>
                    <Button className="search-btn" variant="primary" type="submit">
                        Search
                    </Button>
                </Form>
            </>
        );
    }

}

const Display = (props) => {
    return (
        <>
            <h1 className="pokemon-name">{props.data.name}</h1>
            <p>Pokemon number #{props.data.id}</p>
            <img src={props.pics.front_default} className="img-fluid" alt="pokemon-pic-front"/>
            <img src={props.pics.back_default} className="img-fluid" alt="pokemon-pic-back"/>
        </>
    );
}