Как настроить наведение в собственной сети реагирования? ⇐ CSS

[Anonymous]

В этом собственном веб-компоненте реагирования я пытаюсь настроить эффект TouchableRipple, чтобы добавить зеленую рамку при наведении:

Код: Выделить всё

import React, { useState } from "react"
import { Pressable, View } from "react-native"
import { Surface, Text, TouchableRipple } from "react-native-paper"
import { colors } from "../../style/colors"

interface OptionItemMenuProps {
section: {
title: string
data: {
option: string
}[]
}[]
}

export const OptionItemMenu: React.FC = ({ section }) => {

const [hover, setHover] = useState(false)

return (

{section.map((option) => (

{option.title}
{option.data.map((item) => (
 console.log("teste")}
onHoverIn={() => setHover(true)}
onHoverOut={() => setHover(false)}
style={[
{ paddingVertical: 5, paddingLeft: 5, borderRadius: 5 },
hover && { borderColor: colors.primary, borderWidth: 1, paddingVertical: 4, paddingLeft: 4 },
]}
>
{item.option}

))}

))}

)
}

но проблема в том, что когда я устанавливаю при наведении значение true, стиль применяется ко всем элементам в списке карт, как это видно на изображении ниже:
изображение нежелательного поведения
Я уже пробовал управлять состоянием наведения с помощью событий:
onHoverIn и onHoverOut;
onPointerEnter и onPointerLeave;
Как настроить наведение индивидуально?

Подробнее здесь: https://stackoverflow.com/questions/786 ... native-web