React useReducer is being called twice on each dispatch - reactjs

Question

I have this code which seems to be executing each dispatch of the useReducer twice for some reason I don't get to resolve. I have tried to solve it by moving userReducer out of the component, but the results were the same. At this point I don't know how to approach the problem.
Another issue caused by the repetition of the code is that I create empty arrays [] to work with them but in the second repetition, it creates [''] over the empty array, which shouldn't happen.
Edit: Searching info, I disabled strict mode as well, but the problem persists.
I suggest to see the whole code here:
https://codesandbox.io/s/gallant-villani-zfwbpg?file=/src/App.js
(To trigger the problem, insert one number in the first input at the top, then press the button next to it, A red button will appear to restore previous values. When pressed, two consoles.log are displayed, this happens in every dispatch type.)
here is the useReducer:
function reducer(state, action) {
const arrayPueblosYexclus = ["pueblos_T1","pueblos_T2","pueblos_T3","exclusiones"];
switch (action.type) {
case "RESTORE":
console.log("restored");
return valorPrevio;
break;
case "FETCH_SUCCESS":
const datos = action.payload;
datos?.forEach((element) => {
arrayPueblosYexclus?.map(arel=>{
return element[arel] !== null
? (element[arel] = element?.[arel]
?.toString()
.trim()
.split(","))
: (element[arel] = []);
})
console.log(element.pueblos_T1,element.pueblos_T2,element.pueblos_T3);
});
setLoading(false);
setValorPrevio(state);
return { ...state, data: datos, loading: false, error: null };
break;
case "FETCH_ERROR":
return {
...state,
data: [],
loading: false,
error: Number(action.payload).toFixed(2),
};
break;
case "UPDATE_DATA":
return {
...state,
data: state.data.map((item) => {
if (item.id === action.id) {
return { ...item, [action.property]: action.payload };
}
return item;
}),
};
break;
case "DELETE_FROM_VILLAGES":
return {
...state,
data: state.data.map((item) => {
if (item.id === action.municipio_id) {
return {
...item,
[action.grupo]: item[action.grupo].filter(
(villa) => villa !== action.barrio
),
};
}
return item;
}),
};
break;
case "RISE_PRICES":
setValorPrevio(state);
return {
...state,
data: state?.data.map((item) => {
const updatedItem = { ...item };
const propertiesToUpdate = [
"precioT1_poco",
"precioT1_normal",
"precioT1_grua",
"precioT2_poco",
"precioT2_normal",
"precioT2_grua",
"precioT3_poco",
"precioT3_normal",
"precioT3_grua",
];
propertiesToUpdate.forEach((property) => {
if (
item[property] &&
item[property] !== 0 &&
item[property] !== "0"
) {
if (action.operation_type === "porcentual") {
updatedItem[property] = (
Number(item[property]) +
(Number(item[property]) * action.vlue) / 100
)
.toFixed(2)
.replace(/\.00$/, "");
setPercentage("");
}
if (action.operation_type === "normal") {
updatedItem[property] = (
Number(item[property]) + Number(action.vlue)
)
.toFixed(2)
.replace(/\.00$/, "");
setNormal("");
}
}
});
return updatedItem;
}),
};
break;
case "ADD_VILLAGE":
let villagesArray = action.villages.split(",").map(v=>v.trim().charAt(0).toUpperCase() + v.trim().slice(1));
return {
...state,
data: state.data.map((item,i) => {
if (item.id === action.selected_municipio) {
let villagescoincidence = villagesArray.filter(v => item[action.T].includes(v));
villagesArray = villagesArray.filter(v => !item[action.T].includes(v));
if (villagescoincidence?.length > 0) {
let coincidentes = villagescoincidence.join(", ");
console.log(`This message is appearing twice`);
}
return {
...item,
[action.T]: [...(item[action.T].filter(e => e !== "") || []), ...villagesArray],
};
}
return item;
}),
};
break;
default:
return state;
}
}