diff --git a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
index 064f3167..be662d36 100644
--- a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
+++ b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
@@ -66,7 +66,7 @@ export const P2PVideoDemo = ({
     p2pUploaded: 0,
   });
 
-  const { queryParams, setURLQueryParams } = useQueryParams();
+  const { queryParams, setURLQueryParams } = useQueryParams(streamUrl);
 
   const trackers = useMemo(
     () => queryParams.trackers.split(","),
@@ -121,7 +121,7 @@ export const P2PVideoDemo = ({
 
     return PlayerComponent ? (
       <PlayerComponent
-        streamUrl={streamUrl ?? queryParams.streamUrl}
+        streamUrl={queryParams.streamUrl}
         announceTrackers={trackers}
         swarmId={queryParams.swarmId === "" ? undefined : queryParams.swarmId}
         onPeerConnect={onPeerConnect}
diff --git a/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts b/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
index e6d11573..fd042402 100644
--- a/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
+++ b/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
@@ -1,32 +1,37 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { DEFAULT_STREAM, DEFAULT_TRACKERS, PLAYERS } from "../constants";
 
 type QueryParamsType = Record<string, string>;
 
-const defaultParams: QueryParamsType = {
-  player: Object.keys(PLAYERS)[0],
-  streamUrl: DEFAULT_STREAM,
-  trackers: DEFAULT_TRACKERS,
-  debug: "",
-  swarmId: "",
-};
-
-function getInitialParams(searchParams: URLSearchParams): QueryParamsType {
+function getInitialParams(
+  searchParams: URLSearchParams,
+  defaultParams: QueryParamsType,
+): QueryParamsType {
   return Object.keys(defaultParams).reduce((params, key) => {
     params[key] = searchParams.get(key) ?? defaultParams[key];
     return params;
   }, {} as QueryParamsType);
 }
 
-export function useQueryParams() {
+export function useQueryParams(streamUri?: string) {
+  const defaultParams = useMemo(() => {
+    return {
+      player: Object.keys(PLAYERS)[0],
+      streamUrl: streamUri ?? DEFAULT_STREAM,
+      trackers: DEFAULT_TRACKERS,
+      debug: "",
+      swarmId: "",
+    } as QueryParamsType;
+  }, [streamUri]);
+
   const searchParamsRef = useRef(new URLSearchParams(window.location.search));
   const [queryParams, setQueryParams] = useState<QueryParamsType>(() =>
-    getInitialParams(searchParamsRef.current),
+    getInitialParams(searchParamsRef.current, defaultParams),
   );
 
   const updateQueryParamsFromURL = useCallback(() => {
     const searchParams = searchParamsRef.current;
-    const newParams = getInitialParams(searchParams);
+    const newParams = getInitialParams(searchParams, defaultParams);
 
     setQueryParams((prevParams) => {
       const hasChanges = Object.keys(newParams).some(
@@ -34,7 +39,7 @@ export function useQueryParams() {
       );
       return hasChanges ? newParams : prevParams;
     });
-  }, []);
+  }, [defaultParams]);
 
   const setURLQueryParams = useCallback(
     (newParams: Partial<QueryParamsType>) => {
@@ -60,7 +65,7 @@ export function useQueryParams() {
 
       updateQueryParamsFromURL();
     },
-    [updateQueryParamsFromURL],
+    [defaultParams, updateQueryParamsFromURL],
   );
 
   useEffect(() => {