Wrapper.tsx

import React, { useState, useEffect } from 'react';
import ProjectBuilder from 'musicblocks-v4-builder-framework';

const BuilderWrapper: React.FC = () => {
  const [builderInstance, setBuilderInstance] = useState<ProjectBuilder | null>(null);

  useEffect(() => {
    // Initialize the Project Builder instance
    const builderInstance = new ProjectBuilder();

    // Add event listeners for communication with other components
    builderInstance.addEventListener('event', handleEvent);

    // Set the state to update the component with the initialized instance
    setBuilderInstance(builderInstance);

    return () => {
      // Remove event listeners when component unmounts
      builderInstance.removeEventListener('event', handleEvent);
    };
  }, []);

  const handleEvent = (event: Event) => {
    // Handle events from the Project Builder API
    if (builderInstance) {
      builderInstance.handleCustomEvent();
    }
  };

  return null; // You might return something meaningful here, depending on your application logic
};

export default BuilderWrapper;