The problem is I am facing the error somewhere within here where the function is declared and it is rendered, I am trying to setup a time and date in the footer of my application which changes every second:

function liveDateTime() => {
const [hydrated, setHydrated] = useState(false); 
const [currentTime, setCurrentTime] = useState(""); 
const [timeZone, setTimeZone] = useState("");

useEffect(() => { setHydrated(true);

const updateDateTime = () => {
  const now = DateTime.now();
  setCurrentTime(now.toFormat("yyyy-MM-dd HH:mm:ss"));
  setTimeZone(now.offsetNameShort || "Unknown timezone");
};

updateDateTime();

const interval = setInterval(updateDateTime, 1000);

return () => clearInterval(interval);
}, []);

if (!hydrated) { return null; }

return ( 
    <div suppressHydrationWarning> 
        {currentTime} {timeZone} 
    </div> 
        ); 
}

I have tried suppressing the error within the return statement and where the function is rendered within the main footer component:

<div className="text-sm" suppressHydrationWarning>
  <LiveDateTime />
</div>

Yet I am still getting the below errors in bugsnag:

Minified React error #425

Minified React error #418