Update proptypes, use date function

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -85,9 +85,10 @@ const CustomToolTip = ({ active, payload, label }) => {
 const CustomTick = ({ x, y, payload, index }) => {
   const theme = useTheme();
 
+  const uiTimezone = useSelector((state) => state.ui.timezone);
+
   // Render nothing for the first tick
   if (index === 0) return null;
-
   return (
     <Text
       x={x}
@@ -97,11 +98,7 @@ const CustomTick = ({ x, y, payload, index }) => {
       fontSize={11}
       fontWeight={400}
     >
-      {formatDate(new Date(payload.value), {
-        year: undefined,
-        month: undefined,
-        day: undefined,
-      })}
+      {formatDateWithTz(payload?.value, "HH:mm:ss", uiTimezone)}
     </Text>
   );
 };

Client/src/Pages/Monitors/Details/Charts/index.jsx

@@ -42,8 +42,8 @@ const CustomLabels = ({
 
 CustomLabels.propTypes = {
   x: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   firstDataPoint: PropTypes.object.isRequired,
   lastDataPoint: PropTypes.object.isRequired,
   type: PropTypes.string.isRequired,