How to process the nest object (from ES response) in search-ui

Elastic Search
4

OK, I think I got it now, the idea is to construct the new structure after destructuring from the old record:

 return hits.map(record => {
    const {
      _id: id,
      _score,
      _source: {
        content,
        file: { url, filename }
      },
      highlight: { content: highlighted }
    } = record;
   // console.log("this is destructre:", id, _score, url, filename, highlighted);
    const new_record = { id: id, title: filename, url, highlighted };
    return Object.entries(new_record)
      .map(([fieldName, fieldValue]) => [
        fieldName,
        toObject(fieldValue, getHighlight(new_record, fieldName))
      ])
      .reduce(addEachKeyValueToObject, {});
  });
}

Now I have the issue of displaying the highlighted text in the UI, it is not shown as the yellow highlighted text, but like this:

weather<em>is</em> metadata <em>Scanner</em> like this

Any advice?