diff --git a/src/components/createElementComponent.test.tsx b/src/components/createElementComponent.test.tsx
index ba82573..e46c0ff 100644
--- a/src/components/createElementComponent.test.tsx
+++ b/src/components/createElementComponent.test.tsx
@@ -121,6 +121,33 @@ describe('createElementComponent', () => {
       false
     );
 
+
+    it('Can remove and add CardElement at the same time', () => {
+      let cardMounted = false;
+      mockElement.mount.mockImplementation(()=> {
+        if(cardMounted){
+          throw new Error('Card already mounted');
+        }
+        cardMounted = true;
+      });
+      mockElement.destroy.mockImplementation(()=> {
+        cardMounted = false;
+      });
+
+      const {rerender} = render(
+        <Elements stripe={mockStripe}>
+          <CardElement key={"1"} />
+        </Elements>
+      );
+      rerender(
+        <Elements stripe={mockStripe}>
+          <CardElement key={"2"} />
+        </Elements>
+      );
+
+      expect(mockElement.mount).toHaveBeenCalledTimes(2);
+    });
+
     it('gives the element component a proper displayName', () => {
       expect(CardElement.displayName).toBe('CardElement');
     });
diff --git a/src/components/createElementComponent.tsx b/src/components/createElementComponent.tsx
index 36a0ca2..dc2a8e4 100644
--- a/src/components/createElementComponent.tsx
+++ b/src/components/createElementComponent.tsx
@@ -114,7 +114,7 @@ const createElementComponent = (
       }
     }, [options]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       return () => {
         if (elementRef.current) {
           elementRef.current.destroy();