fix(react-motion): sync internal value of canRender with presence

change/@fluentui-react-motion-preview-9ee2031a-5268-4dd5-8f34-060e985b7d22.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: sync internal value of canRender with presence",
+  "packageName": "@fluentui/react-motion-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts

@@ -64,6 +64,15 @@ describe('useMotion', () => {
   });
 
   describe('when motion is received', () => {
+    it('should sync presence value with canRender', () => {
+      const { result, rerender } = renderHookWithRef(false);
+
+      expect(result.current.canRender).toBe(false);
+      rerender(true);
+
+      expect(result.current.canRender).toBe(true);
+    });
+
     it('should return default values when presence is false', () => {
       const defaultState = getDefaultMotionState();
       const { result } = renderHookWithRef(getDefaultMotionState());

packages/react-components/react-motion-preview/src/hooks/useMotion.ts

@@ -177,11 +177,11 @@ function useMotionPresence<Element extends HTMLElement>(
       ref,
       type,
       active,
-      canRender: type !== 'unmounted',
+      canRender: presence || type !== 'unmounted',
     }),
     // No need to add ref to the deps array as it is stable
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [active, type],
+    [active, type, presence],
   );
 }