Make animated component's event tag properly update

[szydlovsky]

Summary

Turns out (thanks to @j-piasecki for noticing) that animated component's event-emitting viewTag can change through re-rendering. The following fix takes care of that.

Test plan

You can go through all ComposedEventHandler examples form Example app, as well as code snippets in https://github.com/software-mansion/react-native-reanimated/pull/5845#issue-2211354383.

Also, this should work perfectly regardless of re-renders:

Code

``` TYPESCRIPT import React, { useState } from 'react'; import { Button, StyleSheet, View } from 'react-native'; import { GestureDetector, Gesture } from 'react-native-gesture-handler'; import Animated, { useSharedValue, useAnimatedStyle, withSpring, } from 'react-native-reanimated'; function Ball(props) { const isPressed = useSharedValue(false); const offset = useSharedValue({ x: 0, y: 0 }); const animatedStyles = useAnimatedStyle(() => { return { transform: [ { translateX: offset.value.x }, { translateY: offset.value.y }, { scale: withSpring(isPressed.value ? 1.2 : 1) }, ], backgroundColor: isPressed.value ? 'yellow' : 'blue', }; }); const gesture = Gesture.Pan() .onBegin(() => { 'worklet'; isPressed.value = true; }) .onChange((e) => { 'worklet'; offset.value = { x: e.changeX + offset.value.x, y: e.changeY + offset.value.y, }; }) .onFinalize(() => { 'worklet'; isPressed.value = false; }); return ( ); } export default function Example() { const [counter, setCounter] = useState(0); return ( setCounter((prev) => prev + 1)} /> ); } const styles = StyleSheet.create({ container: { flex: 1, }, ball: { width: 100, height: 100, borderRadius: 100, backgroundColor: 'blue', alignSelf: 'center', }, }); ```