Why is every other match of this not conflicting

src/equicordplugins/soundBoardLogger/index.tsx

@@ -21,17 +21,14 @@ import { getListeners } from "./utils";
 
 const HeaderBarIcon = findExportedComponentLazy("Icon", "Divider");
 
-function ToolBarHeader() {
+function OpenLogsButton() {
     return (
-        <ErrorBoundary noop={true}>
-            <HeaderBarIcon
-                tooltip="Open SoundBoard Log"
-                position="bottom"
-                className="vc-soundboard-logger"
-                icon={<LogIcon className="chatBarLogIcon" />}
-                onClick={openSoundBoardLog}
-            />
-        </ErrorBoundary>
+        <HeaderBarIcon
+            className="chatBarLogIcon"
+            onClick={() => openSoundBoardLog()}
+            tooltip={"Open SoundBoard Log"}
+            icon={<LogIcon className="chatBarLogIcon" />}
+        />
     );
 }
 
@@ -45,7 +42,7 @@ export default definePlugin({
             find: "toolbar:function",
             replacement: {
                 match: /(function \i\(\i\){)(.{1,200}toolbar.{1,100}mobileToolbar)/,
-                replace: "$1$self.toolbarAction(arguments[0]);$2"
+                replace: "$1$self.addIconToToolBar(arguments[0]);$2"
             }
         }
     ],
@@ -63,19 +60,19 @@ export default definePlugin({
         disableStyle(styles);
         if (settings.store.IconLocation === "chat") removeChatBarButton("vc-soundlog-button");
     },
-    toolbarAction(e) {
+    addIconToToolBar(e: { toolbar: React.ReactNode[] | React.ReactNode; }) {
         if (Array.isArray(e.toolbar))
             return e.toolbar.push(
                 <ErrorBoundary noop={true}>
-                    <ToolBarHeader />
+                    <OpenLogsButton />
                 </ErrorBoundary>
             );
 
         e.toolbar = [
             <ErrorBoundary noop={true}>
-                <ToolBarHeader />
+                <OpenLogsButton />
             </ErrorBoundary>,
             e.toolbar,
         ];
-    },
+    }
 });