Estoy tratando de alinear el texto en la etiqueta del área de texto escribiendo la lógica con el nombre de la variable myStyle , por lo que la lógica funciona, pero luego hice un cambio para el modo oscuro y agregué más estilo como objeto . Entonces myStyle deja de funcionar. Entonces, la pregunta es cómo agregar la variable myStyle en el atributo de estilo cuando ya existe un objeto dado, ¿cuál es el formato correcto?

 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> </> ) }