diff --git a/src/CSSMotion.tsx b/src/CSSMotion.tsx
index d7550c2..bb8798f 100644
--- a/src/CSSMotion.tsx
+++ b/src/CSSMotion.tsx
@@ -190,6 +190,10 @@ export function genCSSMotion(config: CSSMotionConfig) {
 
       // We should render children when motionStyle is sync with stepStatus
       return React.useMemo(() => {
+        if (styleReady === 'NONE') {
+          return null;
+        }
+
         let motionChildren: React.ReactNode;
         const mergedProps = { ...eventProps, visible };
 
diff --git a/src/hooks/useStatus.ts b/src/hooks/useStatus.ts
index b2fde69..f04e241 100644
--- a/src/hooks/useStatus.ts
+++ b/src/hooks/useStatus.ts
@@ -53,7 +53,7 @@ export default function useStatus(
   stepStatus: StepStatus,
   style: React.CSSProperties,
   visible: boolean,
-  styleReady: boolean,
+  styleReady: 'NONE' | boolean,
 ] {
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
   const [asyncVisible, setAsyncVisible] = React.useState<boolean>();
@@ -311,6 +311,13 @@ export default function useStatus(
     step,
     mergedStyle,
     asyncVisible ?? visible,
-    step === STEP_START || step === STEP_ACTIVE ? styleStep === step : true,
+
+    !mountedRef.current && currentStatus === STATUS_NONE
+      ? // Appear
+        'NONE'
+      : // Enter or Leave
+      step === STEP_START || step === STEP_ACTIVE
+      ? styleStep === step
+      : true,
   ];
 }
diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx
index 54dc31d..d2bb558 100644
--- a/tests/CSSMotion.spec.tsx
+++ b/tests/CSSMotion.spec.tsx
@@ -492,6 +492,24 @@ describe('CSSMotion', () => {
     expect(activeBoxNode).toHaveClass(`animation-leave-active`);
   });
 
+  it('styleReady returns NONE on first mount when status is STATUS_NONE', () => {
+    const mockRender = jest.fn(() => null) as jest.Mock;
+    (mockRender as any).mock.calls = [] as any;
+
+    render(
+      <CSSMotion visible motionAppear motionName="test">
+        {mockRender}
+      </CSSMotion>,
+    );
+
+    // First render (prepare stage)
+    expect(mockRender.mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        className: 'test-appear test-appear-prepare test',
+      }),
+    );
+  });
+
   describe('immediately', () => {
     it('motionLeaveImmediately', async () => {
       const { container } = render(