diff --git a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
index b38d4ca75..5140fa5b5 100644
--- a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
@@ -18,7 +18,9 @@ import {
   BaseComponent,
   BaseVideoComponentState,
 } from '../../../components/BaseComponent';
+import { AgoraDropdown } from '../../../components/ui';
 import Config from '../../../config/agora.config';
+import { arrayToItems } from '../../../utils';
 import { askMediaAccess } from '../../../utils/permissions';
 
 interface State extends BaseVideoComponentState {}
@@ -174,4 +176,25 @@ export default class JoinChannelVideo
   protected renderVideo(user: VideoCanvas): ReactElement | undefined {
     return super.renderVideo(user);
   }
+
+  protected renderConfiguration(): ReactElement | undefined {
+    const { joinChannelSuccess, remoteUsers } = this.state;
+    return (
+      <>
+        {joinChannelSuccess ? (
+          <AgoraDropdown
+            title={'Append renderer to remote users'}
+            items={arrayToItems(remoteUsers)}
+            onValueChange={(value) => {
+              this.setState((prev) => {
+                return {
+                  remoteUsers: [...prev.remoteUsers, value],
+                };
+              });
+            }}
+          />
+        ) : undefined}
+      </>
+    );
+  }
 }