How to print a text that has a link in its content?

how can i print a content inside i want to put a link

i was trying this

setContent(`hi 
    ${(
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
    )}
    their car is ${him.car} 
    and house is ${him.house}`)

but i am getting this

hi [object Object] their car is 1 and house is 1

also i need to show breaking line like

hi [object Object]  
their car is 1  
and house is 1

i am rendering like this:

 <DialogContent>{content}</DialogContent>

Answer

you setContent using Template literals with mean it will be a string, not JSX

i suggest you to wrap it with <div> and dont use Template literals.

  const him = {
    first_name: "jon",
    last_name: "doe"
  };
  const [content, setContent] = useState(
    <div>
      hi 
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
      their car is ${him.car}
      and house is ${him.house}
    </div>
  );

https://codesandbox.io/s/react-playground-forked-f3qc3?file=/index.js