updating state using radio buttons not working nextjs/daisyui

Question

I'm trying to update my state using radio buttons but the following isn't working, all it's doing is sending the default value to the getPrice function.

I'm unsure why it's behaving like that, maybe I'm supposed to use onSelect instead?

I'm using nextjs and DaisyUI radio button comps:

Here's my button:

                    <input
                      type="radio"
                      name="radio-11"
                      value="Matte"
                      className="radio checked:bg-black"
                      checked
                      onChange={() =>
                        dispatch(
                          setSpecs({
                            finish: "Matte",
                          })
                        )
                      }
                    />

And my slice:

export interface DisplateState {
  displates: IDisplateInfo[];
  currentDisplate: IDisplateInfo;
  favoriteDisplates: IDisplateInfo[];
  displateCategories: IDisplateInfo[];
  category: string | null;
  specs: Specs;
}

const initialState: DisplateState = {
  displates: [],
  currentDisplate: {
    img: null,
    title: null,
    category: null,
    id: null,
  },
  favoriteDisplates: [],
  displateCategories: [],
  category: null,
  specs: {
    size: 200,
    finish: "Matte",
    frame: "None",
    price: 50,
  },
};

export const displateSlice = createSlice({
  name: "displate",
  initialState,
  reducers: {
    setDisplates: (state, action: PayloadAction<IDisplateInfo[]>) => {
      state.displates = action.payload;
    },
    setCurrentDisplate: (state, action: PayloadAction<IDisplateInfo>) => {
      state.currentDisplate = action.payload;
    },
    setFavoriteDisplates: (state, action: PayloadAction<IDisplateInfo[]>) => {
      state.favoriteDisplates = action.payload;
    },
    setCategory: (state, action: PayloadAction<string>) => {
      state.category = action.payload;
      state.displateCategories = state.displates.filter(
        (displate) => displate.category === state.category
      );
    },
    setSpecs: (state, action: PayloadAction<Partial<Specs>>) => {
      state.specs = {
        ...state.specs,
        ...action.payload,
        price: getPrice(
          state.specs.size,
          state.specs.finish,
          state.specs.frame
        ),
      };
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchDisplates.fulfilled, (state, action) => {
      state.displates = action.payload;
    });
  },
});

export const {
  setCurrentDisplate,
  setDisplates,
  setFavoriteDisplates,
  setCategory,
  setSpecs,
} = displateSlice.actions;

export default displateSlice.reducer;

And finally my getPrice util function:

export function getPrice(
  size: number,
  finish: string | "Matte",
  frame: string | "None"
): number {
  let price = size / 3;

  console.log(finish, frame);
  if (finish !== "Matte") {
    price = price + 30;
  }

  if (frame !== "None") {
    price += 25;
  }

  return Math.ceil(price);
}