trying to alert in reactjs by renderer

Question

im trying to alert simple stuff in Reactjs by renderer but it didn't work out

here is my code:

index.js:

import Renderer from "./renderer";
import App from "./App";

const root = document.getElementById("root");
Renderer.render(new App({ name: "Hipo" }), root);

App.js:

    import React from 'react';

class App {
  constructor(props) {
    this.props = props;
  }

  get name() {
    return this.props.name;
  }

  handleClick() {
    alert(this.name);
  }

  render() {
    return {
      type: "button",
      style: {
        color: "blue"
      },
      text: "Alert my name",
      onClick: this.handleClick
    };
  }
}

export default App;

and lastly renderer.js

    const Renderer = {
  convertToDOMNode(component) {
    const definition = component.render();
    const element = document.createElement(definition.type);

    if (definition.style) {
      Object.entries(definition.style).forEach(([property, value]) => {
        element.style[property] = value;
      });
    }

    if (definition.onClick) {
      element.addEventListener("click", definition.onClick);
    }

    element.innerText = definition.text;

    return element;
  },

  render(component, element) {
    element.appendChild(this.convertToDOMNode(component));
  }
};

export default Renderer;

any help would be highly appreciated since its my first time using renderer also if there is any articles about renderer would be good to share it with me.