update Timer in HomeDate.js

-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
+import moment from "moment";
 
 
 const HomeDate = styled.div`
 const HomeDate = styled.div`
   display: flex;
   display: flex;
@@ -10,18 +11,37 @@ const WeatherBox = styled.div``;
 
 
 const WeatherSpan = styled.span``;
 const WeatherSpan = styled.span``;
 
 
-const DateBox = styled.div``;
+const DateBox = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 
-const DateSpan = styled.span``;
+const DateSpan = styled.span`
+  font-size: ${(props) => {
+    if (props.className === "Clock") return "45px";
+  }};
+`;
 
 
 export default () => {
 export default () => {
+  const [date, setDate] = useState(moment().format("h:mm:ss a"));
+  useEffect(() => {
+    let timer = setInterval(() => tick(), 1000);
+    return function cleanUp() {
+      clearInterval(timer);
+    };
+  });
+
+  function tick() {
+    setDate(moment().format("h:mm:ss a"));
+  }
+
   return (
   return (
     <HomeDate>
     <HomeDate>
       <WeatherBox>
       <WeatherBox>
         <WeatherSpan /> Weather
         <WeatherSpan /> Weather
       </WeatherBox>
       </WeatherBox>
       <DateBox>
       <DateBox>
-        <DateSpan /> Date
+        <DateSpan className="Clock">{date}</DateSpan>
       </DateBox>
       </DateBox>
     </HomeDate>
     </HomeDate>
   );
   );