I've found a lot of questions that are similar to this but none that actually answer my question.

I have an object key called "text" that contains a string value. In the middle of the string I need a button element to render but I am getting [Object, Object] instead. I have tried other ways but they will only print the button as a string and not as an element.

In short, I have a string but need a word in the middle of the string to become a button.. How would you go about it?

import { Container, Button } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { InstructionsCard } from "components/layout/directory";
import {
  RiNumber1 as OneIcon,
  RiNumber2 as TwoIcon,
  RiNumber3 as ThreeIcon,
} from "react-icons/ri";

const instructions = [
  {
    id: 1,
    icon: OneIcon,
    title: "step one",
    text: "Parent/guardian must make the reservation for the minor through our website (Anyone under the age of 18).",
  },
// attempting to render button[enter image description here][1]
  {
    id: 2,
    icon: TwoIcon,
    title: "step two",
    text: `Parent/guardian will have to sign the minors waiver that is sent via email ${(
      <Button>Email</Button>
    )} after the reservation is made.`,
  },
  {
    id: 3,
    icon: ThreeIcon,
    title: "step three",
    text: "Parent/guardian must show proof of idenity at checkout or can submit a photo of their ID to our email. ",
  },
];

function MinorSection() {
  const classes = useStyles();

  return (
    <section className={classes.root}>
      <Container className={classes.container}>
        {instructions.map((_instruction, index) => {
          return <InstructionsCard key={index} item={_instruction} />;
        })}
      </Container>
    </section>
  );
}

// custom styles
const useStyles = makeStyles((theme) => ({
  root: {
    margin: theme.spacing(5, 0, 5, 0),
  },
  container: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
  },
}));

export default MinorSection;

Output: