I'm currently working on a personal portfolio website where I will be inputting various work experiences, portfolio entries and the like.

In the description of these experiences I would like to have some freedom in the formatting. For example, I might want to add a list in the description. Or I'd like to be able to bold, or italicize different elements in the description.

I'm currently rendering each entry using the map function, and inserting HTML tags in the description just renders the tags in plaintext.

{myExperiences.map((experience) => (
    <CardContent sx={{ flexGrow: 1 }}>
        <Typography gutterBottom variant="h5" component="h2">
            {experience.name}
        </Typography>
        <Typography gutterBottom component="h2">
            {experience.title}
        </Typography>
        <Typography>
            {experience.description} {/* Custom formatting for some entries here */}
        </Typography>
        <Typography sx={{ color: "gray" }}>
            {experience.startDate} - {experience.endDate}
        </Typography>
        <Typography sx={{ color: "gray" }}>
            {experience.location}
        </Typography>
    </CardContent>
))}

What would be a good way to add custom formatting for certain entries? Ideally the custom formatting shouldn't interfere too much with the rest of the code, however I'm not sure how I'd be able to implement it in a standardized way like this. The formatted descriptions should also be able to be placed in a database