Writing new tag in react with similar parent tag breaks the closing tag

[Gonzalo D'Elia]

This is the code before typing

<Table.Head>
  <Table.Row>
  </Table.Row>
</Table.Head>

I want to use a Table.Heading inside the Table.Row. As soon as I type Table.Head (only ing left) it automatically picks the closing </Table.Head> and updates it, breaking the top-most tag. So the code ends with

<Table.Head>
  <Table.Row>
    <Table.Heading></Table.Heading>
  </Table.Row>
</Table.Heading> // this one does not matches the opening tag

when it should be

<Table.Head>
  <Table.Row>
    <Table.Heading></Table.Heading>
  </Table.Row>
</Table.Head> // here it matches the opening tag

here's a gif

just in case, here are my current extensions, though I would not expect any of them to cause this