Change handler delayed by one key

Question

I cannot understand why my change handler is delayed by one change. This is messing up my live search, because if I type Test for example, it is bringing all the objects that contains Test on it, but after erasing, my state stays with T on it's value.

Here is my handler:

function App() {
const [input, setInput] = useState('');
useEffect(() => {
    filteredData = sampleData.filter((card) =>
        card.name.toLowerCase().match(input.toLocaleLowerCase())
    );
}, [input]);

const onChangeHanlder = (event) => {
    event.preventDefault();
    setInput(event.target.value);
    console.log(input);
};

return (
    <div className="App">
        <Nav onChangeHandler={onChangeHanlder} />
        {filteredData.length && <ResposiveContainer data={filteredData} />}
        {/* <ResposiveContainer data={sampleData} /> */}
    </div>
);

}

Check the screenshot