Trivial example of using MorphReplace alongisde with react-icons is no longer working

[korbav]

Hi, I'm trying to adapt the example displayed on the ReadMe in order to make it simply work with react-icons since it's claimed to be working with this library.

A change in either react-svg-morph or react-icons might have made both libraries to be incompatible.

I'm testing out the following basic snippet :

import React from "react";
import { MorphReplace } from "react-svg-morph";
import {
  FaRegPauseCircle as PauseIcon,
  FaRegPlayCircle as PlayIcon
} from "react-icons/fa";
import "./styles.css";

export default class App extends React.Component {
  state = {};

  componentDidMount() {
    setInterval(() => {
      this.setState({
        pause: !this.state.pause
      });
    }, 1000);
  }

  render() {
    const { pause } = this.state;

    return (
      <MorphReplace width={50} height={50}>
        {pause ? <PauseIcon key={"checked"} /> : <PlayIcon key={"checkbox"} />}
      </MorphReplace>
    );
  }
}

Using this trivial code will lead to a TypeError exception to be thrown :

"Component is not function" error
renderToJson
https://vuv3l.csb.app/node_modules/react-render-to-json/lib/renderToJson.js:29:24

Which seems to be inherent to the ReactDOM.render() call.

You might want to take a look at this sandbox to see the problem in action : https://codesandbox.io/s/charming-khayyam-vuv3l?file=/src/App.js

To make it work, a hack must currently be used :

import parse from 'html-react-parser';
import { renderToString } from 'react-dom/server';

export const getSVGElement =
  (content, key) => parse(renderToString(content).replace('<svg', `<svg key="${key}"`));

 <MorphReplace width={50} height={50}>
        {pause ? getSVGElement(<PlayIcon />, "playSVG") : getSVGElement(<PauseIcon />, "pauseSVG") }
      </MorphReplace>