## Description

#### Problem 1

Until now we used to break the execution of setting a new value of a mutable with animation in order to prevent going through the setting process for the same value. But we cannot do this for higher-order animations(they have the same current value as the ones they include).

The problem occurs when we have a shared value and, let's say, a couple of animations placed together in some higher-order animation like `withSequence`, and the first one has the same target value as the shared value current value. The flow stops but it should go on and execute the rest of the animations.

#### Problem 2

Another thing is we didn't support breaking animations on component unmount until now. The worst scenario(not that rare though) would be when a user would run infinite animation using `withRepeat` with repeats value set to `0`(goes infinitely). They would have to stop the animation manually, like this:
```
const sv = useSharedValue(10);
sv.value = withRepeat(withTiming(Math.random() * 400 + 100), 0);
useEffect(() => {
  return () => {
    cancelAnimation(sv);
  };
}, []);
```
But that could easily be skipped and cause efficiency problems after some rerenders(the unstopped animations would be proceeding in the background).

## Test code and steps to reproduce

<details>
<summary>problem 1</summary>

```
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withSequence,
  withRepeat,
} from 'react-native-reanimated';
import { View } from 'react-native';
import React from 'react';

export default function AnimatedStyleUpdateExample() {
  const randomWidth = useSharedValue(10);

  randomWidth.value = withRepeat(
    withSequence(
      withTiming(10, { duration: 500 }),
      withTiming(100, { duration: 500 })
    ),
    0,
    true,
    () => {
      console.log('clb');
    }
  );

  const style = useAnimatedStyle(() => {
    return {
      width: randomWidth.value,
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Animated.View
        style={[
          { width: 100, height: 80, backgroundColor: 'black', margin: 30 },
          style,
        ]}
      />
    </View>
  );
}

```

</details>

<details>
<summary>problem 2</summary>

```
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withRepeat,
} from 'react-native-reanimated';
import { View, StyleSheet } from 'react-native';
import React, { useEffect } from 'react';

export default function Test() {
  const sv = useSharedValue(10);
  useEffect(() => {
    sv.value = withRepeat(
      withTiming(Math.random() * 400 + 100, null, () => {
        console.log('clb #1');
      }),
      0
    );
  }, []);

  const style1 = useAnimatedStyle(() => {
    return {
      width: sv.value,
    };
  });

  const style2 = useAnimatedStyle(() => {
    return {
      width: withRepeat(
        withTiming(Math.random() * 200 + 100, null, () => {
          console.log('clb #2');
        }),
        0
      ),
    };
  });

  return (
    <View>
      <Animated.View style={[styles.box, style1]} />
      <Animated.View style={[styles.box, style2]} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 50,
    backgroundColor: 'orange',
    margin: 20,
  },
});
```

</details>


## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes