Adding className but css is not affecting in ReactJS Components

I have a component called Single Box which will return a div , but i need to have the same class for 6 times , one of the way is i can write Single Box component six times , but thats not a good way.

So i made another component which Multiple Box , here i will loop the Single Box component for six times .

SingleBox

  render(){
    return(
      <div className="box-content"></div>
    )
  }

MultipleBox

 render(){
  let singleBoxArray = [];
   for (var i=0; i<3; i++) {
     if(i< 2){
       singleBoxArray.push(<SingleBox key={i}/>);
     }else {
       singleBoxArray.push(<SingleBox className="box-three"/>)
     }
   }
    return(
      <div>
        {singleBoxArray}
      </div>
    )

    } 

Here for the "Third SingleBox" , i need add one more class and it should affect the css. when i make the console.log("array" , singleBoxArray). For the third elememet i am getting the className in this.props, but my css is not changing .

Many Thanks in Advance