erro props children | React com JavaScript: lidando com arquivos estáticos

import React from 'react'; import style from './Botao.module.scss';

class Botao extends React.Component <{}>{ render() { return ( {this.props.children} ) } }

export default Botao;

Estou com esse erro aí eu tentei resolver ele utilizando essa linha de código:

import React from "react";
import style from "./Botao.module.scss";
interface Props {
  children: React.ReactNode;
}

class Botao extends React.Component <Props>{
  render() {
    return <button className={style.botao}>
        {this.props.children}
        </button>;
  }
}

export default Botao;

aí parou de acusar erro no vscode, mas ainda tenho erro no browser...

ERROR in src/pages/App.tsx:11:8 TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): Botao', gave the following error. Property 'children' is missing in type '{}' but required in type 'Readonly'. Overload 2 of 2, '(props: Props, context: any): Botao', gave the following error. Property 'children' is missing in type '{}' but required in type 'Readonly'. 9 | return ( 10 |

11 | | ^^^^^ 12 | 13 | 14 |

não sei oq acontece... inclusive se eu deixo o props feito da primeira forma, tbm dá erro

import React from 'react'; import Botao from '../components/Botao'; import Formulario from '../components/Formulario'; import Lista from '../components/Lista'; import style from './App.module.scss'; function App() { return ( <div className={style.AppStyle}> <Botao>Adicionar</Botao> <Formulario/> <Lista/> </div> ); } export default App;