unable to apply styling on an active button using styled component

i am creating a bottom sheet for a project with three rooms which whenever a user click on the button it popups and you can the select any room you intend to. clicking on that room i intend to apply a hover and a bckground color to it which indicate you choose that room. i have try doing that with the normal way of styling but i am still unable. i will really appreciate if anyone can help out .

import React,{useState} from 'react'
import styled from 'styled-components'
import {FcGlobe} from "react-icons/fc";
import './BtnStyle.css';


const StartRoom = (props) => {
    const [room, setRoom] = useState("open")
   
  return (
    <> 
    
    <SwitchLine>

   </SwitchLine>
    <Container>
  
  
     <TextRight>  
    
        <AddTopic>
        <p> + Add a Topic   </p> 
      
        </AddTopic>
      </TextRight>
      <SelectRoom>  

   
  
         <button  className={room === "open" ? "  activeBtn" : " "} onClick={(()=> setRoom("open"))}>
         <FcGlobe/>
          <p>open</p>
        </button>

    <button className={room === "social" ? "activeBtn"  : " "}  onClick={(()=> setRoom("social"))}  >
      <FcGlobe/>
      <p>social</p>
  
    </button>
    <button className={room === "closed" ? " activeBtn" : " "}  onClick={(()=> setRoom("closed"))}>
      <FcGlobe/>
     
      <p>Closed</p>
    
    </button>
  
  
   
    
    <span>
       Start  {" "}   
    
  {
    room === "closed" ? " a room"
    : room === "social" ? "with people i follow" 
    : "open to everyone"

  }
    
    </span>
  
   
      <LetGoBtn>    
      <div onClick={()=> {
      props.setSheetCreateRoom(true)
      props.setSheetVisible(true)
      }} >
      <p>  Let's go   </p>  
      </div>
      
      </LetGoBtn>
   
      </SelectRoom>


    </Container> 
    </> 
     

    
const SelectRoom = styled.div`
border-bottom:1px solid #cccccc;
padding:2.5em 0;
display:flex;
align-items:space-evenly;
justify-content:space-evenly;
flex-wrap:wrap;
padding-left:10px;
position: relative;


           
  button{
  line-height:10px;
  margin:10px auto;
  border: none;
  padding: 0.5em 1.3em 0.2em 1.3em ;
  background-color:transparent;
  color: var(--textColor);
 
  border-radius:10px;  
  }

  & button:nth-child(1){
    
    border: 3px solid lightseagreen;
      background-color: lightblue;

  }

  & button:nth-child(2){
    border: 3px solid lightseagreen;
      background-color: lightblue;

  }

  & button:nth-child(3){
    border: 3px solid lightseagreen;
      background-color: lightblue;
  }