Seperate JSX and function blocks from parent parentheses or parent tag

let say I have a React Component (class based for now, yeah i should start using hooks =D)

class App extends Component {
  state = {
    someState: ""
  }  

  render() {
    return (
      <View>
        <View>
          <Text>Header</Text>
        </View>
        
        <View>
          <Text>Main</Text>
        </View>
  
        <View styles={styles.footer}>
          <Text>Footer</Text>
        </View>
      </View>
    )
  }
}

Now i am using vimvscode so i use shift + [ or shift + ] a lot;

now let say i need to delete

state = {
  someState: ""
}

for me i think best way to delete that part i d + shift + [
if my cursor is at

  state = {
    someState: ""
  }[Cursor]

but it will delete up to class App extends Component

same goes for JSX

if i want to delete footer only

<View styles={styles.footer}>
  <Text>Footer<Text>
</View>  

with d + shift + ] if my cursor is at:

it will delete all upto:

        <View styles={styles.footer}>
          <Text>Footer</Text>
        </View>
      </View>
    )
  }
}

I don't want this behaviour,

so i would love to know any prettier configuration or vim plugin that can help me do these stuff

No files, tests, or entry points are named. Start by examining how VSCodeVim handles bracket motions for JavaScript and JSX, then determine whether configuration or plugin support can provide the requested boundaries; done means deletion stops at the intended function or JSX block rather than the surrounding parent structure.