Dispatching Action to Update Redux State

I have a posting UI which i'm building and trying to maintain using redux.

I currently have a slice which resembles:

const jobsearchSlice = createSlice({
  name: "jobsearchSlice",
  initialState: {
    isFetching: false,
    searchComplete: false,
    roles: [],
    error: false,
    finalSelection: false,
    selectedRole: "",
    selectedRole: [],
    selectedStyle: ""
  },
  reducers: {
    searchStart: (state) => {
      state.isFetching = true;
      state.searchComplete = false;
      state.finalSelection = false;
    },
    searchSuccess: (state, action) => {
      state.isFetching = false;
      state.roles = action.payload;
      state.searchComplete = true;
      // state.searchComplete = false;
    },
    searchFailure: (state) => {
      state.isFetching = false;
      state.error = true;
    },
    searchComplete: (state, action, term) => {
      state.isFetching = false;
      state.roles = action.payload;
      state.searchComplete = true;
      state.finalSelection = true;
      state.selectedRole = term;
    },
    searchClear: (state, action) => {
      state.isFetching = false;
    },
    searchUpdateStyle: (state, action, option) => {
      state.selectedStyle = option;
    },
  },
});

All these functions work except, searchUpdateStyle. With this, I'm trying to update the selectedStyle element.

My component is as such, and I want to dispatch the selection to Redux:

                    {/* style! */}
                    {
                    page === 0 && 
                    <Dropdown>
                      <Dropdown_Button
                      onClick={e => 
                          setisActive(!isActive)}
                      >
                          {/* {selectedStyle || "Choose style"} */}
                          { 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>
                    }

The function being used is this:

export const updateStyle = async (dispatch, option) => {
  dispatch(searchUpdateStyle(option));
}

What am I doing incorrectly?