Почему компонент не получает (не имеет) props?

Имеется такой простой (лишнее специально вырезал) компонент:

import React, { Component } from 'react';
class QueryParamSelect extends Component {
  render() {
    return (
      <div>
        {JSON.stringify(this.props)}
      </div>
    )
  }
}
export default QueryParamSelect;

Вывожу его в шаблон back-end фреймворка следующим образом:

%QueryParamSelect{ label: 'Label', options: @options, param: 'rts' }

Что в итоге эквивалентно этому:

<queryparamselect label="Label" options="[[&quot;all&quot;, &quot;All&quot;], [&quot;first&quot;, &quot;First&quot;], [&quot;second&quot;, &quot;Second&quot;]]" param="rts"></queryparamselect>

Ну и чтобы все это дело заработало использую это:

document.addEventListener('DOMContentLoaded', () => {
  if (document.getElementById('query-param-select')) {
    ReactDOM.render(
      <QueryParamSelect/>,
      document.getElementById('query-param-select')
    )
  }
})

В итоге я получаю {} от this.props.

Глядя на официальную документацию (https://reactjs.org/docs/components-and-props.html) я не совсем понимаю в чем проблема. Можете, пожалуйста, объяснить где и что я сделал не так?