How do I handle state changes in a vanilla JS app when integrating with a third-party library?

<!-- BEGIN COPY / PASTE -->
        const state = {
            data: null
        };

        // Function to update state and dispatch a custom event
        function updateState(newData) {
            state.data = newData;
            const event = new CustomEvent('stateChange', { detail: state });
            document.dispatchEvent(event);
        }

        // Event listener to handle state changes
        document.addEventListener('stateChange', (event) => {
            console.log('State updated:', event.detail);
            // Update the UI or perform other actions here
        });

        // Example integration with a third-party library
        function thirdPartyLibraryIntegration() {
            // Simulate receiving new data from a third-party library
            const newData = { key: 'value' };
            updateState(newData);
        }

        // Call the integration function
        thirdPartyLibraryIntegration();
        <!-- END COPY / PASTE -->