CONTEXT

I'm trying to dynamically add the React component into DIV/Another React component base on event f.g onClick event.

I tried and know I can add any HTML element into DIV by JS, simply by createElement and append into the DIV. But I want to add the react component into DIV.

Problem:

When I append React component into DIV, It will add [object Object], I am looking for a way to be able to render and insert React Components into DIV.

Here is codeSandBox : https://codesandbox.io/s/frosty-bouman-f95mx?file=/src/App.js

    import React from react;

    import ./styles.css;

    import Button from ./Button;



    const addToCanvos = () => {

      var canvos = document.querySelector(.canvos);

      canvos.append(<Button />);

    };



    export default function App() {

      return (

        <div className=App>

          <Button event={addToCanvos} />

          <div className=canvos />

        </div>

      );

    }