borderStyle: 'dashed' doesn't work correctly

Description

Dear Developers:
I am trying to control the style of View.
When 'Dashed' pressed, the style of View will be changed, especially the borderStyle will be set as 'dashed'.

The problem is, when I run this on iOS devices, the dashed border line and the solid border line are coexisted. It only appears when overflow is set as 'hidden'

Waiting for your answer : )

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  item: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    overflow: 'hidden'
  },
  addItem: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'red',
    borderRadius: 4,
    borderStyle: 'dashed',
    overflow: 'visible'
  }
})

const HelloWorldApp: React.FC = () => {
  const [st, setSt] = useState(styles.item)
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
      <View style={st}/>
      <Text onPress={() => {
        setSt(styles.addItem)
      }}>Dashed</Text>
      <Text onPress={() => {
        setSt(styles.item)
      }}>Reset</Text>
    </View>
  )
}
export default HelloWorldApp;

Version

0.66.00

Output of npx react-native info

I dont have any info because I reproduced this problem on reactnative.dev/docs/tutorial

Steps to reproduce

You can paste code here reactnative.dev, where I met this problem.

Run with iOS device and click the 'Dashed' Text, you will met same problem, I think.

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  item: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    overflow: 'hidden'
  },
  addItem: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'red',
    borderRadius: 4,
    borderStyle: 'dashed',
    overflow: 'visible'
  }
})

const HelloWorldApp: React.FC = () => {
  const [st, setSt] = useState(styles.item)
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
      <View style={st}/>
      <Text onPress={() => {
        setSt(styles.addItem)
      }}>Dashed</Text>
      <Text onPress={() => {
        setSt(styles.item)
      }}>Reset</Text>
    </View>
  )
}
export default HelloWorldApp;

Snack, code example, screenshot, or link to a repository

No response

Inizia con la riproduzione di View fornita ed eseguila su un dispositivo iOS, concentrandoti sull’interazione tra borderStyle, borderWidth, borderRadius e overflow. L’issue è completata quando il passaggio dallo stile solid allo stile dashed non lascia più visibile un solid border quando overflow è impostato su hidden.