Weird special characters in string while using backtick with single quote or double quote with t function on react

I have a method named makeGreeting(someData) inside the class component in React as

makeGreeting(person){
   return `${person.firstName} ${person.lastName} - ${person.greetings}`;
}

In the same file inside the render method return section, we have called for ViewGreeting component which is in some other file.this.props.personData we are receiving from another component using user input

  <ViewGreeting
     heading={t("common:GREETING_LEVEL")}
     description={t("common:SOME_ANOTHER_LEVEL", {
                  subject: this.makeGreeting(this.props.personData),
                 })}     
   />

Our ViewGreeting component in some another file is as follows

  <ViewGreeting>
      <h2>{props.heading}</h2>
      <p>{props.description}</p>
   </ViewGreeting>

Now when we give data such as:

firstName: "fn",
lastName: "ln"
greeting: "Hello"

then it prints perfectly in ViewGreeting component as fn ln - hello.
but if we give input such as

firstName: "fn",
lastName: "ln"
greeting: "Hello'msg"

or

firstName: "fn",
lastName: "ln"
greeting: "Hello"msg"

means single or double quote inside the greeting message then it prints weird characters in ViewGreeting component as:

fn ln - hello'msg

How should I correct it? I want same greeting in the component as it passed from user input with a single or double quote not these special characters in the Viewgreeting component.