highlight.js: (jsx) multiple self-closing tags with attributes highlighting broken

Given jsx code:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </BrowserRouter>
    );
  }
}

It seems that the XML code is not highlighted because of the second Route tag with attributes. When I tried to modify src/language/javascript.js

          { // E4X / JSX
            begin: /</, end: /(\/\w+|\w+\/)>/,
            subLanguage: 'xml',
            contains: [
              {begin: /<\w+\s*\/>/, skip: true},
              {
-               begin: /<\w+/, end: /(\/\w+|\w+\/)>/, skip: true,
+               begin: /<\w+/, end: /(\/\w+[^>]*|\w+\S*\s*\/)>/, skip: true,

                contains: [
                  {begin: /<\w+\s*\/>/, skip: true},
                  'self'
                ]
              }
            ]
          }

The highlighting works as expected.