Is it possible to append a react component to body

I am importing a react component from npm

import { SketchPicker } from 'react-color';

Right now to use a color picker I write the following method in my class component

 colorHandler(value) {
    if (value === 'custom-color') {
      var picker = document.getElementById('color-picker');
      if (!picker) {
        picker = document.createElement('input');
        picker.id = 'color-picker';
        picker.type = 'color';
        picker.style.display = 'none';
        picker.value = '#FF0000';
        document.body.appendChild(picker);

        picker.addEventListener(
          'change',
          () => {
            this.quill.format('color', picker.value);
          },
          false,
        );
      }
      picker.click();
    } else {
      this.quill.format('color', value);
    }
  }

I would basically like something like

var picker = document.getElementById('color-picker');
picker.appendChild(<SketchPicker />)

Is it possible to do that?