diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
index e702950..29dbd27 100644
--- a/client/src/MediaControl.js
+++ b/client/src/MediaControl.js
@@ -571,8 +571,11 @@ const MediaControl = ({isSelf, peer, className}) => {
   });
 
   useEffect(() => {
-    setTarget(document.querySelectorAll(".MediaControl")[0]);
-  }, []);
+    if (peer && peer.name) {
+      setTarget(document.querySelector(
+        `.MediaControl[data-peer="${peer.name}"]`));
+    }
+  }, [setTarget, peer]);
 
   /* local state is used to trigger re-renders, and the global
    * state is kept up to date in the peers object so re-assignment
@@ -635,9 +638,13 @@ const MediaControl = ({isSelf, peer, className}) => {
     colorAudio = (isValid && media.hasAudio) ? 'primary' : 'disabled',
     colorVideo = (isValid && media.hasVideo) ? 'primary' : 'disabled';
 
+  if (!peer) {
+    return <></>;
+  }
+
   return <>
     <div className="MediaControlSpacer"/>
-    <div className={`MediaControl ${className}`}>
+    <div className={`MediaControl ${className}`} data-peer={peer.name}>
       <div className="Controls" >
       { isSelf && <div onClick={toggleMute}>
           { muted && <MicOff color={colorAudio}/> }