world clock exercise completed

src/App.jsx

@@ -1,20 +1,19 @@
 import logo from "/logo.png";
 import "./App.css";
+import Clock from "./Clock.jsx";
 
-function App() {
+export default function App() {
   return (
     <>
       <div>
         <img src={logo} className="logo" alt="Rocket logo" />
       </div>
       <h1>World Clock</h1>
       <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        <Clock timeZone="Asia/Singapore" />
+        <Clock timeZone="America/New_York" />
+        <Clock timeZone="Asia/Shanghai" />
       </div>
     </>
   );
 }
-
-export default App;

src/Clock.jsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+export default function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    return () => {
+      clearInterval(timerId);
+    };
+  });
+  return (
+    <>
+      <p>
+        {props.timeZone}:
+        {date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}
+      </p>
+    </>
+  );
+}