Formio UI not displaying correctly with ReactDOM - reactjs

Question

I'm new to react and I'm learning to use hooks, but I can't seem to get the Formio plugin to work correctly with a component.
I'm not sure how React.DOM would be implemented with hooks, but Formio's docs state:
import React from 'react';
import ReactDOM from 'react-dom';
import {FormBuilder} from 'react-formio';
ReactDOM.render(
<FormBuilder form={{display: 'form'}} onChange={(schema) => console.log(schema)} />
, document.getElementById('builder')
);
I tried implementing on a component, but ReactDOM kept giving me an error. This code works, but the plugin is all wonky so I know something isn't working correctly.
import React, { useState, useEffect } from "react";
import ReactDOM from 'react-dom';
import { FormBuilder } from 'react-formio';
const FormBuilderPage = props => {
return (
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)}
/>
//,document.getElementById('builder')
)
// This returns an error
return (
ReactDOM.render(
<FormBuilder form={{display: 'form'}} onChange={(schema) => console.log(schema)} />
, document.getElementById('builder')
)
)
}
export default FormBuilderPage;
When I add ReactDOM.render I get the error:
Uncaught Error: Target container is not a DOM element.
Any advise would help!

Answer 1

So their documentation wasn't very clear, but React.DOM is not needed. There was just a css import that I had to add to the index.html file.
So this works!
import React from "react";
import { FormBuilder } from 'react-formio';
const FormBuilderPage = props => {
return (
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)}
/>
)
}
export default FormBuilderPage;
<!-- Formio CSS-->
<link
rel="stylesheet"
href="https://unpkg.com/formiojs#latest/dist/formio.full.min.css"
/>