Tengo un componente en React con un área de texto en el que me gustaría mostrar un botón cuando alguien selecciona una opción de un menú desplegable. Una vez seleccionado, me gustaría que el área de texto muestre un botón de píldora con el valor de la selección desplegable. Me gustaría algo como esta foto de abajo.

Mi solución actual es tener un estado que se actualice con este onClick. Pero tengo un problema en el que el área de texto muestra [objeto objeto] donde debería estar el botón para el campo.título. Si elimino el botón y ejecuto setTextValue ( ${textValue} ${field.title} ), el área de texto muestra el valor muy bien, por ejemplo. nombre, nombre de la empresa, etc... pero parece el mismo texto, el problema es que no hay estilo. ¿Es posible almacenar un elemento html en un estado como este, de modo que el valor del estado tenga un botón?

 const [textValue, setTextValue] = useState(''); <Input name="body" // name is used to label data being passed style={{ height: 150 }} className="border-4 rounded-0 " required={true} placeholder={"What should your customers know?"} type="textarea" rows="4" spellCheck="false" value={textValue} onChange={({target}) => setTextValue(target.value)} /> { fields.map(field => ( <div> <DropdownItem onClick={(event) => setTextValue(`${textValue} ${<div><button>{field.title}</button></div>}`)} <---- this is showing [object object] when trying to render the updated state in a textarea <span className="d-flex justify-content-between fs--1 text-black"> <span className="font-weight-semi-bold">{field.title}</span> </span> </DropdownItem> </div> ))}```