I'm having trouble with the vertical timeline component from an npm package. It seems to be breaking, as you can see in the picture. Additionally, I haven't been able to figure out how to change the color of the vertical line despite reading through the entire documentation. Can anyone provide any assistance? Any help would be greatly appreciated. Here is the image.
<VerticalTimeline className="vertical_timeline .vertical-timeline.vertical-timeline-custom-line">
::before
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'white', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid white' }}
date="2021-Present"
iconStyle={{ background: 'yellow', colot: 'yellow' }}
// icon={<WorkIcon />}
>
<h3 className="vertical-timeline-element-title centerit3" style={{color:"yellow"}}>First semester passed </h3>
<h4 className="vertical-timeline-element-subtitle centerit3">123</h4>
<p className="centerit3">
Bachelor's in Computer Science
</p>
</VerticalTimelineElement>