Input doesn't change color according to the validation (rcc)

I want to validate the value that the user write in the input. The browser works, creating a new room with the click of a button works, but the input doesn't change color according to the validation I set, why?

Inside addRoomName function I created setState for the value inside the room input

addRoomName=(e)=> {
this.setState({room:e.target.value})

and additionally I created setState for the validation with the conditions

 this.setState({addRoomName:e.target.value});
        if(e.target.value.length>=6){
            this.setState({roomNameInputColor:'green'})
        }
        else{
            this.setState({roomNameInputColor:'red'})
        }}

Is that may be the problem? because it seems that the react don't even recognize the validation but just the first setState (the one that bring the value that wrote in the room input)

So why the input doesn't change color? I shared all the code thanks!

App.js

import React, { Component } from 'react'
import './App.css';
import Addroom from './components/Addroom.js'
import Room from './components/Room.js'


export default class App extends Component {


  state={
    
    roomsList:[{room:'',color:''}],
}

  create=(r,c)=> {
    this.setState({roomsList:[...this.state.roomsList,{room:r,color:c}]})
  } 

  render() {
    return (
      <div>

<h1>My Smart House</h1>



{this.state.roomsList.map((element)=>{
         return <Room r={element.room} c={element.color} />

        

       })}

      <Addroom add={this.create}/>
        
      </div>
    )
  }
}

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
            roomNameInputColor:'white',

        }}

        addRoomName=(e)=> {
            this.setState({room:e.target.value})
            
            this.setState({addRoomName:e.target.value});
    
        if(e.target.value.length>=6){
        
            this.setState({roomNameInputColor:'green'})
        }
        
        else{
            this.setState({roomNameInputColor:'red'})

        }}
        addColor=(e)=> {
            this.setState({color:e.target.value})
        }


    createRoom=()=> {
        this.props.add(this.state.room,this.state.color);
    }


    


    render() {
        return (
            <div>



                
                <input onChange={this.addRoomName} style= placeholder='Name Your Room'/><br/>
                <input onChange={this.addColor} placeholder='Whats The Room Color?'/><br/>
                <button onClick={this.createRoom}>Create</button>
                
            </div>
        )
    }

Room.js

import React, { Component } from 'react'

export default class Room extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
        return (
            <div>
                <h1>Room: {this.props.r} </h1>
                <h3>Color: {this.props.c} </h3>
                
            </div>
        )
    }
}