Состояние флажка Toggle не меняется Редуктор React

Я пытаюсь изменить состояние флажка при изменении, но оно не меняется. Похоже на эта картинка. Вот мой InitialState

const initialState = {
  isLoading: false,
  showAlert: false,
  products: [],
  totalProducts: 0,
  numOfPages: 1,
  select: false,
};

Вот мой контекстный код

  const toggleProduct = (e) => {
    const id = e.target.id;
    dispatch({ type: TOGGLE_PRODUCT, payload: { id } });
  };

Редуктор

if (action.type === TOGGLE_PRODUCT) {
    return {
      ...state,
      products: state.products.map((product) => {
        if (product._id === action.payload.id) {
          return { ...product, select: !state.select };
        } else {
          return product;
        }
      }),
    };
  }

И как посмотреть ввод

   <input
        type='checkbox'
        name={name}
        defaultChecked={select}
        id={_id}
        onChange={toggleProduct}
      />

Если ввод просто проверен, он не работает, ввод не выбран, но если defaultChecked, я могу выбрать ввод, но состояние не меняется (пожалуйста, посмотрите на скриншот). заранее спасибо