diff --git a/examples/next-with-app-router/src/app/test1/components/RandomComponent.tsx b/examples/next-with-app-router/src/app/test1/components/OutsideComponent.tsx
similarity index 54%
rename from examples/next-with-app-router/src/app/test1/components/RandomComponent.tsx
rename to examples/next-with-app-router/src/app/test1/components/OutsideComponent.tsx
index 151b0a54b7..c0a17f09a0 100644
--- a/examples/next-with-app-router/src/app/test1/components/RandomComponent.tsx
+++ b/examples/next-with-app-router/src/app/test1/components/OutsideComponent.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-const RandomComponent = (props: any) => {
+const OutsideComponent = (props: any) => {
   return <p {...props}>{props.children}</p>;
 };
 
-export default RandomComponent;
+export default OutsideComponent;
diff --git a/examples/next-with-app-router/src/app/test1/components/TestComponent.tsx b/examples/next-with-app-router/src/app/test1/components/TestComponent.tsx
index 0b89e1855f..aa66448d6b 100644
--- a/examples/next-with-app-router/src/app/test1/components/TestComponent.tsx
+++ b/examples/next-with-app-router/src/app/test1/components/TestComponent.tsx
@@ -4,6 +4,7 @@ import React, { ElementType, ReactNode } from 'react';
 import { StyleProps, TransferProps } from '../../../../../../packages/web-react/src/types';
 // import { useStyleProps } from './originalStyleProps';
 import { useStyleProps } from './newStyleProps';
+import classNames from 'classnames';
 
 interface TestComponentProps extends StyleProps, TransferProps {
   elementType?: ElementType | string;
diff --git a/examples/next-with-app-router/src/app/test1/page.tsx b/examples/next-with-app-router/src/app/test1/page.tsx
index 4221126595..aff6f03dbc 100644
--- a/examples/next-with-app-router/src/app/test1/page.tsx
+++ b/examples/next-with-app-router/src/app/test1/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Heading, Text as SpiritText } from '@lmc-eu/spirit-web-react';
 import TestComponent from './components/TestComponent';
-import RandomComponent from './components/RandomComponent';
+import OutsideComponent from './components/OutsideComponent';
 
 const page = () => {
   return (
@@ -28,7 +28,7 @@ const page = () => {
           Spirit Text component with UNSAFE class and style
         </TestComponent>
 
-        <TestComponent elementType={RandomComponent} className="test" style={{ color: 'green' }}>
+        <TestComponent elementType={OutsideComponent} className="test" style={{ color: 'green' }}>
           Random component with class and style
         </TestComponent>
       </>
@@ -46,7 +46,7 @@ const page = () => {
         </TestComponent>
 
         {/* This will not be working - Random component doesn't know what UNSAFE style props are */}
-        <TestComponent elementType={RandomComponent} UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
+        <TestComponent elementType={OutsideComponent} UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
           Random component with UNSAFE class and style
         </TestComponent>
       </>