React does not update values nor state - reactjs

Question

No matter what i write, even if i write a variable and push into it and console.log that value inside filterColumns function it still does not give an updated value nor for the simple variable nor for the state,
console.log(filteringItems) inside filterColumns gives just property value but inside addFilteringItem function it just logs initial state value, can't even think of what is wrong with the code, if you have any additional questions i'll answer any of them.
import { GridColumnsConfig } from './GridColumnsConfig/GridColumnsConfig';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import React, { useEffect, useState } from "react";
import { IOptionsData } from "./Grid";
interface IGridDropdownItemProps {
options: IOptionsData;
filterRequest: any;
cancelFilter?: any;
// filterRequest: (data: IDataRecords) => () => () => void; #comehere
}
function GridDropdownItem(props: IGridDropdownItemProps) {
let id: number = Math.ceil(Math.random() * 1000000000000);
const [filteringItems, setFilteringItems] = useState([...props.options.columns]);
const addFilteringItem = (name:string) => {
let temp = filteringItems.map((item) =>{
if(item.name === name){
item.visible = !item.visible;
}
return item;
});
setFilteringItems([...temp]);
};
const filterColumns = () => {
let columns = [...filteringItems];
// add all column name by default
let data: {
columns: any[];
limit: number;
page: number;
} = {
columns: columns,
limit: props.options.limit,
page: props.options.page,
};
let tempColumns = [
...columns.filter(
(col) =>
Object.entries(columns).filter(
(fi) => fi[0] === col.name && fi[1] === false
).length > 0
),
];
columns.map((col) => {
col.visible = true;
delete col.filter.value;
});
// tempColumns changes part of columns(bcs of pointer) that changes data.columns(bcs of pointer too)
tempColumns.map((col) => {id
col.visible = false;
col.filter.value = null;
});
// console.log(columns, tempColumns);
props.filterRequest(data);
};
return (
<div className="single-button-dropdown uib-dropdown-menu nt-scroll custom-dropdown btn-block old-dropdown-styles ">
<ul
className="dropdown-block scroll vertical hard"
style={{ width: "100%" }}
>
<li>
<DndProvider backend={HTML5Backend}>
<GridColumnsConfig columns={filteringItems} handleCheckboxClick={addFilteringItem}/>
</DndProvider>
</li>
</ul>
<div style={{ position: "absolute", zIndex: 1 }} className="buttons">
<div className="actions">
<div className="pull-right">
<button
type="button"
className="btn btn-primary"
onClick={() => {
filterColumns();
props.cancelFilter();
}}
>
Submit
</button>
{props.options.compactMenu !== undefined &&
props.options.compactMenu ? (
<button
type="button"
className="btn btn-primary"
style={{ background: "#ff8518", color: "#fff" }}
ng-click="saveGridState()"
>
Save
</button>
) : (
<button
className="nd btn btn-default"
onClick={() => props.cancelFilter()}
>
Close
</button>
)}
</div>
</div>
</div>
</div>
);
}
export default GridDropdownItem;

Answer 1

Getting tired really blurred my vision, problem is in mutation.
I'm directly mutating props and that was setting my state to prop value again and again.
let temp = filteringItems.map((item) =>{
if(item.name === name){
item.visible = !item.visible;
}
return item;
});
Fixed Code
let temp = props.options.columns.map((item) =>{
if(item.name === name){
return {...item,visible:!item.visible}
}
return item;
});