Кнопки требуют двух нажатий на мобильном устройстве: первое нажатие вызывает состояние наведения. Во-вторых, вызвать фун ⇐ CSS

[Гость]

У меня есть кнопка в моем приложении React. Эта кнопка работает в веб-приложении должным образом, но когда я открываю приложение на своем Iphone в Chrome, для работы кнопки требуется два нажатия. Первый щелчок вызывает эффект наведения, а второй — эффект onClick. У меня есть 2 файла svg — один для состояния при наведении и при отсутствии наведения. Изображение SVG будет отображаться на основе значения isHover. Любая помощь приветствуется! Вот мои коды:
const OptionsButton: FC = ({ отключен = ложь, className="опции-кнопка", по щелчку, style={курсор:'pointer',height:'34',width:'34',bottom:'15', right:'15',position:'absolute' } }) => { const [isHover, setIsHover] = useState(false); const handleMouseEnter = () => { setIsHover (истина); } const handleMouseLeave = () => { setIsHover (ложь); } const handleClick = (e: React.MouseEvent) => { onClick (е); е.stopPropagation(); } возвращаться ( { ( isHover )? : } ) }