I have a component in React with a textarea that I'd like to show a button in when someone selects an option from a dropdown. Once selected I'd like the textarea to render a pill button with the value of the dropdown selection. Id like something like this photo below.

My current solution is to have a state that gets updated with this onClick. But I am having an issue where the textarea is showing [object object] where the button for field.title should be. If i remove the button and run setTextValue(${textValue} ${field.title}) the textarea renders value just fine ex. first name, company name etc... but it just looks like the same text, The issue is that there is no styling. Is it possible to store an html element in state like this, so the value of the state has a button?

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