end

src/App.js

-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const TimeButton = (props) => {
   const [time, setTime] = useState(null);
-  const timer = useMemo(() => {
-    return setInterval(() => {
-      let date = new Date();
-      let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
-      let formattedDate = date.toLocaleDateString(undefined, options);
-      setTime(formattedDate);
+  const [show, setShow] = useState(false);
+  let timer = null;
+
+  const startTimer = () => {
+    timer = setInterval(() => {
+      displayTime();
     }, 1000);
-  }, [props.tz]);
+  };
 
-  useEffect(() => {
-    return () => {
+  const stopTimer = () => {
     clearInterval(timer);
+    timer = null;
+  };
+
+  const handleClick = () => {
+    if (timer) {
+      stopTimer();
+    } else {
+      startTimer();
+      displayTime();
+    }
+    setShow(!show);
   };
-  }, [timer]);
 
   const displayTime = () => {
     let date = new Date();
-    let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
+    let options = {
+      timeZone: props.tz,
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    };
     let formattedDate = date.toLocaleDateString(undefined, options);
     setTime(formattedDate);
-  }
+  };
+
+  useEffect(() => {
+    return () => {
+      stopTimer();
+    };
+  }, []);
 
   return (
     <>
-      <button onClick={displayTime} tz={props.tz}>{props.name}</button>
-      <div id='time'>{time}</div>
+      <button onClick={handleClick}>{props.name}</button>
+      {show && <div id='time'>{time}</div>}
     </>
   );
-}
+};
 
 const App = () => {
   const cityListConst = [
-    { cityName: "Vienna", timezone: "Europe/Vienna" },
-    { cityName: "Lord_Howe", timezone: "Australia/Lord_Howe" },
-    { cityName: "Shanghai", timezone: "Asia/Shanghai" }
+    { cityName: 'Vienna', timezone: 'Europe/Vienna' },
+    { cityName: 'Lord_Howe', timezone: 'Australia/Lord_Howe' },
+    { cityName: 'Shanghai', timezone: 'Asia/Shanghai' },
   ];
 
   const [cityList, setCityList] = useState(cityListConst);
@@ -51,6 +75,6 @@ const App = () => {
       </div>
     </>
   );
-}
+};
 
 export default App;