Fix button.map warning inside Sidebar.jsx 'each child in a list should hae a unique key prop'. Pass 'key' parameter in top level Tooltip inside map function

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -34,9 +34,8 @@ export default function Sidebar({ view, onChangeView }) {
 
   // Track currrent view from both Sidebar and Canvas when 'view' changes
   useEffect(() => {
-    console.log("typeof view =", typeof view);
+    // console.log("typeof view =", typeof view);
     console.log("Current view = ", view);
-    // const dashboardViews = ["widget", "gas", "seismic", "remote", "daily"];
 
     const newIndex = buttons.findIndex((btn) => {
       if (btn.view === "widget") {
@@ -52,6 +51,7 @@ export default function Sidebar({ view, onChangeView }) {
 
   return (
     <Box
+      // key={button.name}
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
@@ -70,12 +70,12 @@ export default function Sidebar({ view, onChangeView }) {
       {buttons.map((button, idx) => {
         const Icon = button.icon;
         return (
-          <Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+          <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
             <Button 
-              key={idx} 
+              key={button.name} 
               css={styles.buttons} 
               onClick={() => {
-                setActiveButton(idx);
+                // setActiveButton(idx);
                 onChangeView(button.view); // Trigger state change in Dashboard
               }} 
               bg={activeButton === idx ? "primary":undefined}