javascript – Why double faucet function isn’t working in DuckDuckGo browser and Courageous browser in IOS?

The under is the code in react.js the place I’ve carried out the function of double faucet. When person double faucets on the talent, it removes the tapped talent from abilities checklist and provides it to the groups checklist and vice-versa.
It’s engaged on each browser in android however it isn’t working in Duckduckgo browser and courageous browser in IOS.
NOTE that it’s working in each different browsers in IOS.
“”The under code has the capabilities and variables””

const [team, setTeam] = useState([]);
const [skills, setSkills] = useState([
    { name: 'Acupuncturist' },
    { name: 'Alexander Technique' },
    { name: 'AromaDome Therapy' },
    { name: 'Aromatherapist' },
    { name: 'Body Code' },
    { name: 'Pro Skill' }
]);
// for double faucet
const [lastTapTime, setLastTapTime] = useState(0);
const [lastTappedIndex, setLastTappedIndex] = useState(-1);
const handleSkillTouch = (index, isTeamSkill) => {
    const now = new Date().getTime();
    const timeSinceLastTap = now - lastTapTime;

    if (timeSinceLastTap < 300 && index === lastTappedIndex) {
        // Double faucet detected
        if (isTeamSkill) {
            const selectedSkill = group[index];
            const newTeam = group.filter((_, i) => i !== index);

            setTeam(newTeam);
            setSkills([...skills, selectedSkill]);
        } else {
            const selectedSkill = abilities[index];
            const newSkills = abilities.filter((_, i) => i !== index);

            setSkills(newSkills);
            setTeam([...team, selectedSkill]);
        }
    }

    setLastTapTime(now);
    setLastTappedIndex(index);
};

“”The under is the returned code””

<div className="to_flex">
    <div className="button_list_scrollable " type={{ backgroundColor: '#f6faf3' }}>
        {abilities.map((talent, index) => (
            <div className="w-embed" key={index} onTouchStart={() => handleSkillTouch(index, false)}>
                <a className="button small-tag tag-shape">
                    <i className="fas fa-circle"></i> {talent.title}
                </a>
            </div>
        ))}
    </div>

    <div className="button_list_scrollable" type={{ backgroundColor: '#f6faf3', border: group.size > 0 ? '#8a68a3 2px strong' : '' }}>
        <div className="drag-drop_text my-2" type={{ show: 'block' }}>
            Double faucet abilities so as to add
        </div>
        {group.map((talent, index) => (
            <div className="w-embed" key={index} onTouchStart={() => handleSkillTouch(index, true)}>
                <a className="button small-tag tag-shape">
                    <i className="fas fa-circle"></i> {talent.title}
                </a>
            </div>
        ))}
    </div>
</div>

I attempted one other double faucet codes however they’re additionally not working.