Couple things:

1. I'm pretty sure your variable prev_job_title as scoped variable can be finicky. @EjPlatzer probably has an opinion on this
2. there is some logic cleanup you can employ

make a comment about this bugging out BECAUSE of the default transcript item. or else this looks confusing

It's not ideal to duplicate the whole styles, just to add the position: relative and top: -20px. It would be better to keep those in a separate class and simply apply both classes when needed:

There is another way to do this, which in my opinion is both easier and more maintainable.

Basically, you can use Object.groupBy to group the experiences by Job_Title, and display the title once per group of jobs with the same title.

The grouping is as simple as:

const grouped_experiences = Object.groupBy(experiences, (experience) => experience.Job_Title);

To give a more complete example, here's a simplified experiences array:

const jobs = [
    {title: 'Dishwasher', start: new Date('2016-08-20'), end: new Date('2017-05-15')},
    {title: 'RA', start: new Date('2017-08-01'), end: new Date('2018-05-25')},
    {title: 'RA', start: new Date('2018-08-02'), end: new Date('2019-05-10')}
];

and we can group it like so:

const jobsByTitle = Object.groupBy(jobs, job => job.title);

we can convert that object to an array of objects, where each object in the array has a Job_Title property which is the title of all the jobs in that group, and a jobs property which is the array containing all the jobs in that group:

const jobGroups = Object.entries(jobsByTitle).map(([title, jobs]) => ({Job_Title: title, jobs}))

then we can render those job groups:

const Experience = ({Job_Title, jobs}) => {
return (
    <div className={styles.experience_transcript_activities}>
        <div className={styles.organization_role}>{Job_Title}</div>
        {jobs.map((job) => (
           <div>{formatDuration(job)}</div>
        )}
    </div>
)

Thank you for your suggestion. Can you explain why using group is easier and more maintainable? This code takes an array of information one by one from the ordered list. If I use group, it need an extra function to extract data from the group and a function that is similar to the upper code to display one title per group and to ignore job titles in the group, which is more complicate.

Because your current code is using React's useState hook to keep track of whether a certain title has been seen yet or not, you have to update state (and thus re-render the entire transcript) once for each experience. If you instead group experiences by job title before passing the data to React (i.e. within services/transcript.ts), you will already have all the data calculated and won't have to re-render any extra times.

Thank you for your answer! I tried to group experiences within services/transcript.ts (line 51-78), but the type of data will be changed from groupedMembershipHistory to array if I group by job title. Is there better way to group experience or improve the code without groupBy?

Remove unused consolelogs

that top part and the first half of the ternary are logically identical. Is there a reason both are included?

remove console logs

remove unused code

This needs to become StudentEmployment, and the old one above should be deleted.

Keep meaning of this field.

I think this should be deleted.

Return this new GroupByTitle in groupedMembershipHistory, NOT the de-grouped version below. (Why do all the work to combine each job into one entry with multiple times, and then not use it?)

Why is this unrelated change in this pull request. Please put it in a different branch and make a pull request just for it. Then it won't need to wait for the other parts you are still working on.

I think this could be simpler if you passed in the grouped jobs.