fix: fix render with StrictMode

Author: fakundo

.storybook/theme.ts

@@ -2,7 +2,6 @@ import { create } from '@storybook/theming';
 
 export default create({
   base: 'dark',
-
   brandTitle: 'react-transitioning',
   brandUrl: 'https://fakundo.github.io/react-transitioning/',
   brandImage: undefined,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transitioning",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React components for easily implementing basic CSS animations and transitions",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/Transition.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useIsoEffect } from './useIsoEffect';
 
 /**
@@ -138,11 +138,11 @@ export function Transition(props: TransitionProps) {
     addEndListener,
   } = props;
 
-  let ignoreInPropChange = false;
+  const ignoreInPropChangeRef = useRef(false);
 
   // Make phase state
   const [phase, setPhase] = useState(() => {
-    ignoreInPropChange = true;
+    ignoreInPropChangeRef.current = true;
     if (!inProp) {
       return TransitionPhase.EXIT_DONE;
     }
@@ -179,7 +179,7 @@ export function Transition(props: TransitionProps) {
 
   // Effect for initial phase
   useIsoEffect(() => {
-    if (!ignoreInPropChange) {
+    if (!ignoreInPropChangeRef.current) {
       if (inProp) {
         setPhase(enter ? TransitionPhase.ENTER : TransitionPhase.ENTER_DONE);
       } else {