I can’t seem to get the form to render correctly with formRender

[clinicamaniladev]

it outputs "Form Rendered" in the browser console but nothing actually shows

FormRender.tsx
import './jQuery';

import 'jquery-ui-sortable';
import 'formBuilder/dist/form-render.min.js';
import { useEffect, useRef } from 'react';

declare global {
  interface JQuery {
    formRender(options?: any): any;
  }
}

const data = [
  {
    type: 'number',
    required: false,
    label: 'Number',
    className: 'form-control',
    name: 'number-1738036369201-0',
    access: false,
    subtype: 'number',
  },
  {
    type: 'paragraph',
    subtype: 'p',
    label: 'Paragraph',
    access: false,
  },
];

const FormRender = () => {
  const fb = useRef(null);
  const isInitialized = useRef(false);

  useEffect(() => {
    if (!isInitialized.current) {
      if (fb.current) {
        $(fb.current).formRender({
          dataType: 'json',
          formData: JSON.stringify(data),
        });
      }
      isInitialized.current = true;
    }

    return () => {
      if (fb.current) {
        $(fb.current).empty();
      }
    };
  }, []);

  return (
    <div className='bg-gray-100 p-4'>
      <div className='bg-white p-4 rounded-md shadow-md'>
        <p className='mb-3'>FORM RENDER</p>
        <div className='w-full h-full bg-red-500'></div>
        <div id='fb-render' ref={fb}></div>
      </div>
    </div>
  );
};

export default FormRender;