[ReactJS][Resolved] Uncaught SyntaxError: Inline Babel script: Unterminated JSX contents

Uncaught SyntaxError: Inline Babel script: Unterminated JSX contents (13:12)
  11 |
  12 | ReactDOM.render(
> 13 |   <Toggle />,
     |             ^
  14 |   document.getElementById('root')
  15 | );
  16 |

Source code
<script type="text/babel">
class Toggle extends React.Component {
  render() {
    return (
      <button>
        ON
      <button>
    );
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
</script>
<div id="root"></div>

The real error message is not direct related to what the error message highlighted,
you should check the syntax error of in your components.
For example, in my case "Unterminated JSX contents" highlighted is about the comma after "<Toggle />". so you can try check the JSX content in <Toggle> component's render function, I found i got a careless mistake that I created open tag only but without any close button tag.

      <button>
        ON
      <button>

to

      <button>
        ON
      </button>