[iOS] Strange gradient appears when using `borderTopLeftRadius` (or similar) inside a scaled `View`

Description

See snack reproduction: https://snack.expo.dev/@whiteroseeducation/ios-bordertopleftradius-gradient-issue

The issue only appears on iOS devices.

When two conditions are met, you see weird gradients near the corners. These conditions are:

1. The View has style which sets the border corners to different radius values, e.g. with borderTopLeftRadius.
2. The View is nested in a View which has a shrinking scale transform.

E.g.

<View
  style={{
    width: 400,
    height: 400,
    transform: [{ scale: 0.5 }],
  }}>
  <View
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: 'white',
      borderColor: 'navy',
      borderWidth: 8,
      borderTopLeftRadius: 40,
    }}
  />
</View>

Steps to reproduce

1. Click snack link above
2. Run on an iOS device or simulator
3. Observe that the first shape (labelled "The issue") has weird gradients in it, which aren't specified by its style

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Reproducer

https://snack.expo.dev/@whiteroseeducation/ios-bordertopleftradius-gradient-issue

Screenshots and Videos

Comienza con la reproducción enlazada en Snack y ejecútala en un dispositivo o simulador iOS usando React Native 0.76.7. Compara la View exterior escalada y la View interior con borderTopLeftRadius; se considera terminado cuando la forma afectada ya no muestra degradados que no están presentes en su style.