Search form component - needs to filter data from an API call

CharacterList.js

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import CharacterCard from './CharacterCard'
import SearchForm from './SearchForm'

export default function CharacterList ()
{
    const [characters, setCharacters] = useState([]);

    const newPage = false;

    useEffect(() =>
    {
        axios
            .get(`https://rickandmortyapi.com/api/character`)
            .then(res =>
            {
                console.log(res.data.results)
                setCharacters(res.data.results)
            })
            .catch(err =>
            {
                console.log('Error, data was not returned from server', err);
            })
    }, [newPage]);

    const searchResultDisplay = (search) =>
    {
        const searchResults = characters.filter(character => character.name.toLowerCase() === search.toLowerCase());
        setCharacters(searchResults);
    }


    return (

        <section className="character-list">
            <h2>Character List</h2>
            <Link className='home' to={'/'}>Home</Link>
            <div>
                <SearchForm search={searchResultDisplay} />
            </div>
            {characters.map((character) =>
            {
                return (
                    <CharacterCard
                        key={character.id}
                        image={character.image}
                        name={character.name}
                        status={character.status}
                        species={character.species}
                        type={character.type}
                        gender={character.gender}
                    />
                )
            })}
        </section>
    )
}

SearchForm.js

import React, { useState } from 'react';


const SearchForm = (props) =>
{
    console.log(props);

    const [results, setResults] = useState('');


    const handleChanges = event =>
    {
        setResults(event.target.value);
        console.log(results)
    }

    const resetInputField = () =>
    {
        setResults('')
    }

    const submitSearch = event =>
    {
        event.preventDefault();
        props.search(results);
        resetInputField();
    }

    return (
        <div>
            <form className='search-bar'>
                <label>
                    Search Characters:
                <input
                        value={results}
                        type='text'
                        onChange={handleChanges}
                        placeholder='Search for a character'
                    />
                    <input
                        onClick={submitSearch}
                        type='submit' value="SEARCH"
                    />
                </label>
            </form >
        </div>
    );
}


export default SearchForm

I have been hacking on this for a few days. Trying to filter API data using the query string and pass that along through props to a couple other components via render props and react router. I've gotten somewhat lost on it though, unfortunately. Any advice helps, as I'm still very new at this. Thanks! Also, I've put the other relevant components in the files below.