[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

リンクされた Snack の再現から始め、React Native 0.76.7 を使用して iOS デバイスまたはシミュレータで実行します。スケーリングされた外側の View と、borderTopLeftRadius を持つ内側の View を比較します。影響を受ける図形に、style に存在しないグラデーションが表示されなくなれば完了です。