Trying to put a script in React using dangerouslySetInnerHTML

Question

I'm trying to write an XSS CTF exercise on React. To start I'm trying to get a fixed javascript alert to run using dangerouslySetInnerHTML. I believe, on submit, it adds on the script to the webpage but it doesn't run. Thank you in advance!

import React, { Component } from "react"; 
import {withRouter} from 'react-router'; 
import ReactDOM from 'react-dom'; 

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {value: '', final: 'asdf'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault()
    this.setState({final:'<script type="text/javascript">alert(1)</script>'})
  }


  render() {
    return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Type a message" id="messageField" onChange={this.handleChange}/> <br/>
        <input type="submit" className='submitbutton' value="Submit" />
      </form>

      <div dangerouslySetInnerHTML={{__html: this.state.final}} />
    </div>
    );
  }
}


export default withRouter(User)