Redux State into a {JSON} - What's the error?

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

After this selection, though, I want to populate it in a timeline component—this is an MUI element. While it works, it appears that I need to add conditional JavaScript so that an array will be populated based on the selections. Currently there are 3 selections max.

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>
  );
}

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