Field delete on unmount

[KyloJorgensen]

Description

In React, there is a possibility of calling useEffect twice in the browser or experiencing unmounting and remounting. Due to this behavior, the VGS collect-js-react package does not handle unmounting properly, and neither the form nor the field values are exposed in contexts or callbacks for proper cleanup.

Motivation and Context

I am attempting to integrate VGS into a Next.js app. During this process, two iframes are rendered for each secure field. The first iframe is not being unmounted correctly, which results in it not being part of the form object but still present in the DOM.

Testing

I have tested this code in a local development runtime with Next.js.

Screenshots (if appropriate):

Types of Changes

• [x] Bug fix (non-breaking change that fixes an issue)
• [ ] New feature (non-breaking change that adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.

[flor-master]

@KyloJorgensen, thanks for a good job :)