O meu codigo esta igual ao do professor, porem ele não aparece as "<li> no app

import React from 'react';
import ListaDeNotas from "./components/ListasDeNotas.jsx";

function App() {
  return (  
    <section>
    <from>
    <input type="text" placeholder="titulo"/>
      <textarea placeholder="Escreva Sua nota..."></textarea>
      <button> Criar nota </button>
    </from>
      <listaDeNotas/>

    </section>

 );
}

export default App;

import React, { Component } from "react"

 export default class ListaDeNotas  extends Component {
   render(){
       return ( <ul>
        <li>
          <section>
            <header>
              <h3>titulo</h3>
            </header>
            <p>Escreva Sua nota</p>
          </section>
        </li>
        <li>
          <section>
            <header>
              <h3>titulo</h3>
            </header>
            <p>Escreva Sua nota</p>
          </section>
        </li>
        <li>
          <section>
            <header>
              <h3>titulo</h3>
            </header>
            <p>Escreva Sua nota</p>
          </section>
        </li>
    </ul> )

}
   }