Dispatching changes in React State to Redux in Dropdown

I have a dropdown in which you select a type of work, for example, full-time. With this, it will then set my state to 'Full Time': const [selectedStyle, setselectedStyle] = useState('')

Using this, it's all functioning and the state will update when selected:

<Dropdown>
      <Dropdown_Button
      onClick={e => 
          setisActive(!isActive)}
      >
          { selectedStyle.length>1 &&
          <Typography variant="subtitle2" color="black" >{selectedStyle}</Typography>
          || 
          <Typography variant="subtitle2" color="black" >Select Style</Typography>
          }
          <span>
              <KeyboardArrowDownIcon/>
          </span>
      </Dropdown_Button>
      {isActive &&
      <Dropdown_Content>

          {styleSelection.map((option) => (
              <Dropdown_Item 
                  key={option}
                  onClick={(e) => {
                  setselectedStyle(option)
                  setisActive(false)
                  updateStyle(dispatch, option)
              }}
              >
                <Typography variant="subtitle5" color="black" sx={{ "&:hover": { color: "white" } }}>{option}</Typography>
              </Dropdown_Item>
          ))}
      </Dropdown_Content>
    }
</Dropdown>

However, for some odd reason, this will function but it delivered an array like so:

type(pin):"jobsearchSlice/searchUpdateStyle" payload(pin):"Internship"

I just want to update this with the payload. My current action is:

export const updateStyle = async (dispatch, option) => {
  console.log('this is', option)
  dispatch(searchUpdateStyle(option));
}

Anyone know what's wrong?