Fix Element effect cleanup when using async stripe prop (#153)

src/components/createElementComponent.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render} from '@testing-library/react';
+import {render, act} from '@testing-library/react';
 
 import {Elements} from './Elements';
 import createElementComponent from './createElementComponent';
@@ -405,5 +405,20 @@ describe('createElementComponent', () => {
       unmount2();
       expect(mockElement.destroy).toHaveBeenCalled();
     });
+
+    it('destroys an existing Element when the component unmounts with an async stripe prop', async () => {
+      const stripePromise = Promise.resolve(mockStripe);
+
+      const {unmount} = render(
+        <Elements stripe={stripePromise}>
+          <CardElement />
+        </Elements>
+      );
+
+      await act(() => stripePromise);
+
+      unmount();
+      expect(mockElement.destroy).toHaveBeenCalled();
+    });
   });
 });

src/components/createElementComponent.tsx

@@ -115,11 +115,9 @@ const createElementComponent = (
     }, [options]);
 
     React.useEffect(() => {
-      const element = elementRef.current;
-
       return () => {
-        if (element) {
-          element.destroy();
+        if (elementRef.current) {
+          elementRef.current.destroy();
         }
       };
     }, []);