Выделяется не тот элемент ReactJS

в разработке недавно, на проекте появилась такая проблема, (актуальна только для Iphone, не зависимо от браузера)

есть такой компонент, все метро приходят с бэка дело в том, что если быстро выделать соседние элементы, то активным станет верхний элемент (например: я выделяю Невский проспект и сразу же Петроградскую, то петроградская не выделится, а просто невский станет опять неактивным) и я не знаю что делать, пробовал и onClick и onMouseDown и дебаунсинг делать

Вот как выглядит верстка

{show &&
                <List active={active} ref={listRef}>
                    {cityId ? 
                        list.map(item => 
                            <ListItem 
                                key={item.id} 
                                onMouseDown={() => selectItem(item.id)}
                            >
                                <Checkbox className="metros-checkbox" value={item.active} onChange={() => {}}/>
                                <Typography size="16px" lineHeight="20px">{item.name}</Typography>
                            </ListItem>
                        )
                        :
                        <ListItem>
                            <Typography size="16px" lineHeight="20px">Город не выбран</Typography>
                        </ListItem>
                    }
                </List>
            }

И вот обработчик

const selectItem = (id : number) => {
        setList(
            list.map(item => {
                if(item.id === id) {
                    return {...item, active: !item.active}
                }
                return item
            })  
        )
    }