I am working on a First Come First Serve CPU scheduler with JavaScript. The problem I am facing is that for some reason my component for the gantt-chart visualization does not render when it is supposed to (When the calculations are completed). The component however does render when I make a change to the code and the calculations have completed.

It seems as though the rendering is at random as sometimes when I add in a console.log(processes) to see what is happening right before I map the data to a process, 1) the data is there and 2) It randomly will render.

Code for Gantt-Chart component:

export default function GanttChart({processes}) {
  return (
    <div className="chart-area">
        <div className="gantt-chart">
            {processes.map((process) => (
                <> 
                    <div key={process.processName} className="process" style={{ width: (parseInt(process.burstTime, 10)) + "%" }}>{process.processName}</div>
                </>
            ))}
        </div>
    </div>
  )
}

I'm trying to have this component to render after calcTurnAroundWaitingTime() function executes and the width of each "process" is based upon the burstTime of that process:

Function that handles the FirstComeFirstServe Algorithm:

function handleFCFS(e){
        e.preventDefault();

        // Pushing the process data from the form to the process array for each process
        processData.forEach(process => {
            processes.push(process);
        });

        // Error checking if there are no processes to process by seeing if the first processName === null
        if (!processes[0].processName){
            alert("Nothing to process");
            return;
        }

        processes.join(); // Joining the array of objects together as a string separated by ,
        processes.sort(orderLeastGreatest); // Sorting the string by calling the compare  function that compares the objects arrival times

        // Calculating completion time
        calcCompletionTime(processes);

        // Calculating turnaround time and waiting time
        calcTurnAroundWaitingTime(processes);