Input or textarea in table can't display correctly when pasted to Word or Outlook

I have a table where a column is filled with default values and editable.
I've tried both <input> and <textarea>, but neither could display the content properly when the table is pasted to a Word document or Outlook.

Does anyone know how I could make the content display correctly when pasting to other places?

Code:

edit_description = (e, data) => {
    var temp = this.state.dic;
    temp[data] = e.target.value;
    var descriptions = this.props.redux_store.descriptions;
    trend_descriptions[data] = e.target.value;\
    this.setState({\dic: temp}, () =>{
      this.props.SET_DESCRIPTIONS(descriptions);
    });
  };

render(){
return(
<table>
          <tr>
            <th className="table_title">Title</th>
            <th className="table_title">Description</th>
          </tr>
          {Object.keys(this.props.data).map((data) => (
            <tr>
              <td>
                {this.props.redux_store.data[data].title}
              </td>
              <td>
                <textarea
                  style={{ border: "none", resize: "none" }}
                  onInput={(e) => this.edit_description(e, data)}
                  defaultValue={descriptions[data] !== undefined ? 
                    (descriptions[data]) : ("")}>
                    </textarea>
              </td>
            </tr>
          ))}
        </table>
)}

Whenever I highlight the table, ctrl+C, and ctrl+v to paste it to Word or Outlook, it's showing like this:

My guess is that these <input> & <textarea> tags aren't supported by Word or Outlook?
After some experiment, it looks like a <div> or <span> could display properly after pasting to Word/Outlook but doesn't seem to work well when I need to fill it with default values and use OnInput or OnChange to save their values..or perhaps I'm not sure how it can be done.