[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

Bắt đầu với bản tái hiện Snack được liên kết và chạy nó trên thiết bị hoặc trình mô phỏng iOS bằng React Native 0.76.7. So sánh View bên ngoài đã được scale với View bên trong có borderTopLeftRadius; hoàn tất khi hình dạng bị ảnh hưởng không còn hiển thị các dải màu không có trong style của nó.