无论如何，React 应用程序都没有显示在 Codepen 中？

我有一个我在 VS Studio 中制作的 React 应用程序，将它放入 codepen，它似乎没有加载任何东西，有什么建议吗？

我尝试确保 React 已链接并检查了我的所有语法，本地主机上没有错误，但 codepen 中没有显示。

我已经多次查看代码，我觉得这是一个愚蠢的错误

https://codepen.io/donnieberry97/pen/EzmOvW

    class TodoListt extends React.Component {
      state = {};

      constructor(props) {
        super(props);

        this.state = {
          userInput: "",
          list: [],
          editing: false,
        };
      }

      changeUserInput(input) {
        this.setState({
          userInput: input
        })
      }


      addToList() {
        if (this.state.userInput === "") { (alert("Please enter a To-do")); return; };
        const { list, userInput } = this.state;
        this.setState({
          list: [...list, {
            text: userInput, key: Date.now(), done: false
          }],
          userInput: ''
        })
      }

      handleChecked(e, index) {
        console.log(e.target.checked);
        const list = [...this.state.list];
        list[index] = { ...list[index] };
        list[index].done = e.target.checked;
        this.setState({
          list
        })
      }

      handleEditing(e) {
        this.setState({
          editing: true
        })
      }

      handleRemoved(index) {
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
          list
        })
      }

      render() {

        var viewStyle = {};
        var editStyle = {};

        if (this.state.editing) {
          viewStyle.display = "none"
        }
        else {
          editStyle.display = "none"
        }


        return (
          <div className="to-do-list-main">
            <input
              onChange={(e) => this.changeUserInput(e.target.value)}
              value={this.state.userInput}
              type="text"
            />
            <div class="submitButton">
              <button onClick={() => { this.addToList(this.state.userInput) }}>Add todo</button>
            </div>

            {this.state.list.map((list, index) => (
              <div className="form">
                <ul>
                  {/* <div style={viewStyle} onDoubleClick={this.handleEditing.bind(t his)}> */}

                  <li key={list.key}>
                    <div class="liFlexCheck">
                      <input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
                    </div>
                    <div class="liFlexText">
                      <div class="liFlexTextContainer">
                        <span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
                          {list.text}
                        </span>
                      </div>
                    </div>
                    <button onClick={(index) => this.handleRemoved(index)}>Remove</button>
                    <input
                      type="text"
                      style={editStyle}
                      value={list.text}
                    />
                  </li>
                  {/* </div> */}
                </ul>
              </div>
            ))}


          </div>
        );
      }
    }