I want to set the thumbnail to an image tag retrieved from GraphQL. However, a string is displayed

I want to set the thumbnail to an image tag retrieved from GraphQL. However, a string is displayed. [ [

const HeaderFeedCell = (props) => {
  const {
    title,
    pubDate,
    link,
    content,
    id,} = props.feed;
  return (


 <Card className={styles.container} >
 <Link to={`${link}` } className={styles.link}>

{content}

<Card.Body  className={styles.cardContents} >

<Card.Title  variant="light" className={styles.cardTitle}>     {title}
</Card.Title>

<div className={styles.footer}>

<Card.Footer >{pubDate}</Card.Footer>
</div>

May it is not the best practice but if you are sure about the data coming from the server and can trust it you can do something like this with dangerouslySetInnerHTML:

const HeaderFeedCell = (props) => {
  const {
    title,
    pubDate,
    link,
    content,
    id,} = props.feed;
  return (
    <Card className={styles.container}>
      <Link to={`${link}` } className={styles.link} />
      <div dangerouslySetInnerHTML={{__html: content}} /> //notice the dangerouslySetInnerHTML
      <Card.Body  className={styles.cardContents} >
        <Card.Title  variant="light" className={styles.cardTitle}>
          {title}
        </Card.Title>
      </Card.Body>
      <div className={styles.footer}>
        <Card.Footer >{pubDate}</Card.Footer>
      </div>
    </Card>
)}