Generate Material Timeline from JSON Object

I have this Json object generated by BE:

{
  "step1": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 1",
    "description": "description 1"
  },
  "step2": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 2",
    "description": "description 2"
  },
  "step3": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 3",
    "description": "description 3"
  }
}

Material Timeline:

                     <Timeline align="alternate">
                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary"> // get color form Json
                                    9:30 am  // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot>
                                    <LibraryBooks />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 1 // get title from JSON
                                    </Typography>
                                    <Typography> // get description from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    11:00 am // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <PeopleAlt />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 2 // get title from JSON
                                    </Typography>
                                    <Typography>description 2 // get value from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    10:00 am // get value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <BusinessCenter />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 3 // get values from JSON
                                    </Typography>
                                    <Typography>description 3 // get value from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                    </Timeline>

Is it possible to set all values from JSON object and set also Paper component color based on JSON value using Typescript? When I have "approved": true to set green color for Paper background.

from Generate Material Timeline from JSON Object