how to render webcomponent in react

Webcomponent.jsx

import React from 'react';

export default function WebComponent({ component, ...props }) {
  const [myEl, setState] = React.useState(document.createElement(component));
  const el = React.useRef(null);
  React.useEffect(() => {
    if (myEl.tagName.toLowerCase() !== component.toLowerCase() ) {
      setState(document.createElement(component));
    } else {
      Object.keys(props).forEach(key => {
        if (typeof props[key] === 'string') {
          myEl.setAttribute(key, props[key]);
        } else {
          myEl[key] = props[key];
        }
      });
    }
    if (el) {
      el.appendChild(myEl);
    }
  });
  return <div ref={(ref) => {
    el = ref;
    el.appendChild(myEl);
  }}></div>;
}