add state, change link button style

-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -67,18 +67,22 @@ const StartBox = styled.div`
 `;
 
 const StartLink = styled(Link)`
-  background-color: #3dc1d3;
-  color: #f1f2f6;
-  text-align: center;
-  font-size: 18px;
-  font-weight: 500;
-  width: 150px;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
+  background-color: white;
+  color: black;
+  border: 2px solid #3dc1d3;
+  padding: 16px 32px;
+  margin: 4px 2px;
+  transition-duration: 0.4s;
+  border-radius: 8px;
+  &:hover {
+    background-color: #3dc1d3;
+    color: white;
+  }
 `;
 
-export default () => {
+export default ({ btnStateProp }) => {
+  const [btnState] = useState(btnStateProp ? btnStateProp : "main");
+
   return (
     <Header>
       <Nav>
@@ -100,13 +104,20 @@ export default () => {
               <HeaderMenuItem>
                 <Link to="/news">News</Link>
               </HeaderMenuItem>
-              <HeaderMenuItem>
-                <Link to="/support">Support US</Link>
-              </HeaderMenuItem>
             </HeaderMenuList>
-            <StartBox>
-              <StartLink to="/auth">Start</StartLink>
-            </StartBox>
+            {btnState === "main" ? (
+              <>
+                <StartBox>
+                  <StartLink to="/auth">Start</StartLink>
+                </StartBox>
+              </>
+            ) : (
+              <>
+                <StartBox>
+                  <StartLink to="/roomlist">RoomList</StartLink>
+                </StartBox>
+              </>
+            )}
           </HeaderMenuNav>
         </HeaderBox>
       </Nav>