[Web] Handle SVG wrapped with createAnimatedComponent (#3379)

## Description

Currently, when user wraps `SVG` component with `createAnimatedComponent`, we have no way to detect that `child` node passed into [Wrap](https://github.com/software-mansion/react-native-gesture-handler/blob/6e8d88e5a3b15bb399c188d4c23603b4e0f4a8bc/src/handlers/gestures/GestureDetector/Wrap.web.tsx#L9) comes from `SVG`. This results in additional `div` with `display" contents;` being added, which effectively breaks `SVG`.

>[!CAUTION]
>In order to fix this, I've opened [PR against Reanimated](software-mansion/react-native-reanimated#6978) that adds inner component name into `displayName` of the `forwardRef` that `createAnimatedComponent` returns. 

Fixes #3356 

## Test plan

<details>
<summary>Tested on the code from issue</summary>

```jsx
import { useMemo, useRef } from 'react';
import {  Text, View, Animated, PanResponder } from "react-native";
import { Svg, Rect } from 'react-native-svg';
import { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler';
import RNRAnimated, { useSharedValue, useAnimatedProps} from 'react-native-reanimated'

const RNRAnimatedRect = RNRAnimated.createAnimatedComponent(Rect)
const AnimatedRect = Animated.createAnimatedComponent(Rect)

export default function Index() {
  const pan = useRef(new Animated.Value(0)).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan}]),
      onPanResponderRelease: () => {
        pan.extractOffset();
      },
    }),
  ).current;

  const RNTest = <View style={{borderWidth: 1}}>
    <Text>With RN... though this isn't ideal because it lets you drag the yellow region</Text>

    <Animated.View {...panResponder.panHandlers}>
      <Svg width={200} height={100} >
        <Rect width={200} height={100} fill='yellow'/>
        <AnimatedRect width={100} height={100} x={pan} y={0} fill='red'/>
      </Svg>
    </Animated.View>
  </View>

  const x = useSharedValue(0)
  const animatedX = useAnimatedProps(() => ({x: x.value}), [x]);
  const xStart = useSharedValue(0);
  const svgPanGesture = useMemo(() => {
    return Gesture.Pan()
      .onBegin(() => {xStart.value = x.value})
      .onChange((e) => {
        x.value = xStart.value + e.translationX
      })
  }, [])

  const RNGHTest = <View style={{borderWidth: 1}}>
    <Text>With RNGH and RNR</Text>

    <Svg width={200} height={100}>
    <Rect width={200} height={100} fill='yellow'/>
      <GestureDetector gesture={svgPanGesture}>
        <RNRAnimatedRect width={100} height={100} animatedProps={animatedX} y={0} fill='red' />
      </GestureDetector>        
    </Svg>
  </View>

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
    <View
      style={{
        flex: 1,
        justifyContent: "center",
      }}
    >
      {RNTest}
      {RNGHTest}
    </View>
    </GestureHandlerRootView>
  );
}
```

</details>

Author: m-bert

src/handlers/gestures/GestureDetector/Wrap.web.tsx

@@ -1,17 +1,15 @@
 import React, { forwardRef } from 'react';
 import type { LegacyRef, PropsWithChildren } from 'react';
 import { tagMessage } from '../../../utils';
+import { isRNSVGNode } from '../../../web/utils';
 
 export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
   ({ children }, ref) => {
     try {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const child: any = React.Children.only(children);
 
-      const isRNSVGNode =
-        Object.getPrototypeOf(child?.type)?.name === 'WebShape';
-
-      if (isRNSVGNode) {
+      if (isRNSVGNode(child)) {
         const clone = React.cloneElement(
           child,
           { ref },

src/web/utils.ts

@@ -233,7 +233,7 @@ function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
   return { tiltX, tiltY };
 }
 
-const RNSVGElements = [
+export const RNSVGElements = new Set([
   'Circle',
   'ClipPath',
   'Ellipse',
@@ -254,7 +254,7 @@ const RNSVGElements = [
   'Text',
   'TextPath',
   'Use',
-];
+]);
 
 // This function helps us determine whether given node is SVGElement or not. In our implementation of
 // findNodeHandle, we can encounter such element in 2 forms - SVG tag or ref to SVG Element. Since Gesture Handler
@@ -269,7 +269,19 @@ export function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef) {
   const componentClassName = Object.getPrototypeOf(viewRef).constructor.name;
 
   return (
-    RNSVGElements.indexOf(componentClassName) >= 0 &&
+    RNSVGElements.has(componentClassName) &&
     Object.hasOwn(viewRef, 'elementRef')
   );
 }
+
+// This function checks if given node is SVGElement. Unlike the function above, this one
+// operates on React Nodes, not DOM nodes.
+//
+// Second condition was introduced to handle case where SVG element was wrapped with
+// `createAnimatedComponent` from Reanimated.
+export function isRNSVGNode(node: any) {
+  return (
+    Object.getPrototypeOf(node?.type)?.name === 'WebShape' ||
+    RNSVGElements.has(node?.type?.displayName)
+  );
+}