I am trying to do text-align in textarea tag by writing logic with the variable name myStyle, so the logic is working but then when I made a toggle switch for dark mode and added more styling as object. Then myStyle stop working. So the question is how to add myStyle variable in style attribute when there is already a given object what is the correct format?

export default function TextForm(prop) {
  const [text, setText] = useState("Enter text here");

  const [myStyle, setMyStyle] = useState({
    textAlign:'left'
  })
  const textAlign = ()=>{
    if(myStyle.textAlign === 'left'){
      setMyStyle({
        textAlign: 'center'
      })
    }
    else if(myStyle.textAlign === 'center'){
      setMyStyle({
        textAlign:'right'
      })
    }
    else{
      setMyStyle({
        textAlign:'left'
      })
    }
  }

  return (
    <>
    <div className='container' style={{color: prop.mode==='light'?'Black':'white'}}>
        <h2>{prop.heading} </h2>
        <div className="mb-3">
        <textarea className="form-control " style={myStyle,{ backgroundColor:prop.mode==='light'?'white':'grey', color:prop.mode==='light'?'black':'white'}} value={text}  onChange= {handleOnChange}  id="myBox" rows="6"></textarea>
        </div>
        <button className="btn btn-primary mx-1" onClick={textAlign} >Change Text Align</button>
    </div>
    </>
  )
}