Redux useSelector to populate JSON data

I have a component which controls the state in Redux through dropdown. For example, if you selected dropdown 1 and set the option to 'Phone call' it will set it through redux.

After this selection, I want to populate it on a timeline. For this I am using MUI component. It is functioning, however it appears I need to add conditional javascript so that an array will populate based on the selections. Currently there is 3 max selections.

For example, a functioning component.

export default function JobPostInterviewVerticalStepper() {
  const [activeStep, setActiveStep] = React.useState(0);
  const interviewStep1 = useSelector(state => state.jobsearch.selectedInterview1)
  const interviewStep2 = useSelector(state => state.jobsearch.selectedInterview2)
  const interviewStep3 = useSelector(state => state.jobsearch.selectedInterview3)


  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  const steps = [
    {
      label: 'step1',

    },
    {
      label: 'step2',
    },
    {
      label: 'step3',
    },
    {
      label: 'Offer',
    },
  ];

  return (
    <Wrapper>

      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((step, index) => (
          <Step key={step.label}>
            <StepLabel
              optional={
                index === 3 ? (
                  <Typography fontSize="12px" >Last step</Typography>
                ) : null
              }
            >
              {step.label}
            </StepLabel>
            <StepContent>
              <Box sx={{ mb: 1 }}>
                <div>
                  <Button
                    variant="contained"
                    onClick={handleNext}
                    sx={{ mt: .5, mr: .5 }}
                  >
                    {index === steps.length - 1 ? 'Continue' : 'Continue'}
                  </Button>
                  <Button
                    disabled={index === 0}
                    onClick={handleBack}
                    sx={{ mt: 1, mr: 1 }}
                  >
                    Back
                  </Button>
                </div>
              </Box>
            </StepContent>
          </Step>
        ))}
      </Stepper>

    </Wrapper>
  );
}

With the above, I would like to populate 'steps' with the useSelector, so as the next dropdown is selected, interviewStep1 will have data and therefore will populate step 1 with the data. As indicated in the data file. What's the best way to access the data/potentially have conditional rendering