Why does state only update after invoking twice using React Hooks?

Question

I'm stuck trying to understand why my state won't update until I change the value in the text input twice (calling the handleChange function). What am I doing wrong here?

import React, {useEffect, useState} from "react";

export default function Typeahead(props){
    const {list}  = props;
    const [colorList] = useState(list.map(element => element.toLowerCase()));
    const [color,setColor] = useState();
    const [showResults, setShowResults]= useState(false);
    const [results,setResults]= useState();

    let handleChange = (e) =>{
        setShowResults(true);
        setColor(e.target.value.toLowerCase());
        const match = (colorList) =>{
            return colorList.startsWith(color,0);
        };
        const matches = colorList.filter(match);
        setResults((matches));

        console.log(results);
        console.log(showResults);
    };

    useEffect(() => {

        //setResults(list.map(elements => elements.toLowerCase()));
    }, [results]);

        return(
            <div>
                <input type= "text" onChange={handleChange}/>
                {showResults ?
                    <div>
                        {results.map((options) => {
                            return (
                                <option key={options} value={options}> {options}</option>
                            )
                        })}
                    </div>
                    : null }
            </div>
        );
}