app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx

@@ -1,6 +1,7 @@
 import RoboticArmInstance from "./armInstance/roboticArmInstance";
 import { useArmBotStore } from "../../../../store/simulation/useArmBotStore";
 import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
+import React from "react";
 
 function RoboticArmInstances() {
   const { armBots } = useArmBotStore();
@@ -8,10 +9,10 @@ function RoboticArmInstances() {
   return (
     <>
       {armBots?.map((robot: ArmBotStatus) => (
-        <>
+        <React.Fragment key={robot.modelUuid}>
-          <RoboticArmInstance key={robot.modelUuid} armBot={robot} />
+          <RoboticArmInstance armBot={robot} />
-          <RoboticArmContentUi roboticArm={robot}/>
+          <RoboticArmContentUi roboticArm={robot} />
-        </>
+        </React.Fragment>
       ))}
     </>
   );

app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx

@@ -9,10 +9,10 @@ function VehicleInstances() {
   return (
     <>
       {vehicles.map((vehicle: VehicleStatus) => (
-        <>
+        <React.Fragment key={vehicle.modelUuid}>
-          <VehicleInstance agvDetail={vehicle} key={vehicle.modelUuid} />
+          <VehicleInstance agvDetail={vehicle} />
-          <VehicleContentUi vehicle={vehicle} key={`${vehicle.modelUuid}-ui`} />
+          <VehicleContentUi vehicle={vehicle} />
-        </>
+        </React.Fragment>
       ))}
     </>
   );

app/src/styles/components/simulation/simulation.scss

@@ -425,6 +425,8 @@
       animation: borderAnimation 5s linear infinite;
       -webkit-mask: linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       z-index: -1;