[Solved]-State not updating on removing value from array in React JSX funcntional component-Reactjs

The splice method just mutates the existing array instance and React avoids rerendering the array thinking it's the same array (React uses referential equality). You need to create a new array after removing the item.

Any of the following would work

Using spread operator to create a new array.

if (event.target.checked) {
    //adding values to array
    setSelectedKeys([...selectedKeys, event.target.value]);
} else {
    var index = selectedKeys.indexOf(event.target.value);
    if (index >= -1) {
        //Removing values from array
        selectedKeys.splice(index, 1);
    }
    setSelectedKeys([...selectedKeys]);
}

Filter the array which also outputs a new array

if (event.target.checked) {
    //adding values to array
    setSelectedKeys([...selectedKeys, event.target.value]);
} else {
    var index = selectedKeys.indexOf(event.target.value);
    if (index >= -1) {
        //Removing values from array and set the new array
        setSelectedKeys(
            selectedKeys.filter((item, itemIndex) => itemIndex !== index)
        );
    }
}