Using a Prop to populate an array - React useState

I have 3 dropdowns, each which controls state. When this dropdown is selected it will set the target and send it to redux. For example.

    const [interviewStep1, setinterviewStep1] = useState('Phone Screening')
    const [interviewStep2, setinterviewStep2] = useState('Formal Interview')
    const [interviewStep3, setinterviewStep3] = useState('Reference Check')

This is sent to redux in this manner.

<Dropdown_Content>

                {interviewStageSelection.map((option) => (
                    <Dropdown_Item 
                        key={option}
                        onClick={(e) => {
                        setinterviewStep1(option)
                        setisActive(!isActive)
                        console.log(interviewStep1)
                        setisActive(false)
                        updateInterview1(dispatch, option)
                    }}
                    >
                      <Typography variant="subtitle5" color="black" sx={{ "&:hover": { color: "white" } }}>{option}</Typography>
                    </Dropdown_Item>
                ))}
            </Dropdown_Content>

I then pass this state as props into my next component.

export default function JobPostInterviewVerticalStepper(interviewStep1, interviewStep2, interviewStep3) 

this does come through, but then I want to display in my array. How do I use these props?

  const steps = [
    {
      label: 'Phone Screening',
      //I WANT A interviewStep1 here!

    },
    {
      label: 'Formal Interview',
    },
    {
      label: 'Reference Check',
    },
    {
      label: 'Offer',
    },
  ];