Avoid animation to have poor performance when added dynamically

I have a pulse animation view

import React, {useEffect, useRef} from 'react';import {Animated, Easing} from 'react-native';const PulseView = (props: {size: number; color: string}) => {let scale = useRef(new Animated.Value(1)).current;let opacity = useRef(new Animated.Value(1)).current;useEffect(() => {    Animated.timing(scale, {      toValue: 1.5,      duration: 750,      delay: 0,      useNativeDriver: true,      easing: Easing.inOut(Easing.circle),    }).start();    Animated.timing(opacity, {      toValue: 0,      duration: 750,      delay: 200,      useNativeDriver: true,    }).start();    // eslint-disable-next-line react-hooks/exhaustive-deps}, []);return (<Animated.View    style={{        backgroundColor: props.color,        position: 'absolute',        width: props.size,        height: props.size,        borderRadius: props.size / 2,        transform: [{scale: scale}],        opacity: opacity,    }}    />);};export default PulseView;

I would like to trigger this animation and so add dynamically a new view each time a click on a button.

My button press function is like that :

const addAnimation = () => {                const key = Math.random();    pulses.push({launch: false, key: key, time: moment().unix()});}

And the render :

...const [pulses, setPulses] = useState([] as Pulse[]);...<View>    {pulses.map((pulse: Pulse) => {        return <PulseView key={pulse.key} size={size - 2} color={colors.cyan[1]} />;    })}<View>

The animation have very low performance, and the map is made 2 times on each press.