NextJS bilen birisi yardımcı olabilir mi?

Nextjs yazarken bir yerde takılı kaldım. Free API ile deneme amaçlı kripto dönüştürücü yapıyorum. Para birimini seçerken arama kısmına harf giremiyorum, bir harfe bastığımda alttaki seçeneklere gidiyor.

'use client';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import ListSubheader from '@mui/material/ListSubheader';
import TextField from '@mui/material/TextField';
function Home() {
    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [fromCurrency, setFromCurrency] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get("https://api.coinlore.net/api/tickers/");
                const fetchedData = response.data?.data || [];
                setData(fetchedData);
                setFilteredData(fetchedData);
                if (fetchedData.length > 0) {
                    const btc = fetchedData.find((coin) => coin.symbol === "BTC");
                    if (btc) {
                        setFromCurrency(btc.price_usd.toString());
                    }
                }
            } catch (error) {
                console.error("Veri çekim hatası:", error);
            }
        };
        fetchData();
    }, []);
    const handleSearch = (event) => {
        const query = event.target.value;
        setSearchQuery(query);
        const filtered = data.filter((coin) =>
            coin.name.toLowerCase().includes(query.toLowerCase()) ||
            coin.symbol.toLowerCase().includes(query.toLowerCase())
        );
        setFilteredData(filtered);
    };
    return (
        <div>
            <div className="container">
                <Box sx={{ minWidth: 120 }}>
                    <FormControl sx={{ m: 5, minWidth: 150 }}>
                        <InputLabel id="from-currency-label">From:</InputLabel>
                        <Select
                            labelId="from-currency-label"
                            id="from-currency"
                            value={fromCurrency}
                            label="Coin From"
                            onChange={(e) => setFromCurrency(e.target.value)}
                        >
                            <ListSubheader>
                                <TextField
                                    size="small"
                                    placeholder="Ara..."
                                    fullWidth
                                    value={searchQuery}
                                    onChange={handleSearch}
                                    onKeyDown={(event) => event.stopPropagation()} // Varsayılan davranışı engelle
                                    autoFocus
                                />
                            </ListSubheader>
                            {searchQuery.length > 0 ? (
                                filteredData.map((coin) => (
                                    <MenuItem value={coin.price_usd} key={coin.id}>
                                        {coin.name} ({coin.symbol})
                                    </MenuItem>
                                ))
                            ) : data?.map((coin) => {
                                return (
                                    <MenuItem value={coin.price_usd} key={coin.id}>{coin.name}</MenuItem>
                                );
                            })}
                        </Select>
                    </FormControl>
                </Box>
            </div>
        </div>
    );
}
export default Home;

onkeydown değerini handlesearch olarak değiştir.

olmadı

rust desk id atar mısın hocam bi incelemek isterim