Setting Nested Array in React Context

I am trying to figure out how to update an array that is nested within a React Context. Below is the context I am working with. It consists of "lists". Each list contains an array of "items".

import React, {useState, createContext} from 'react';

export const ListerContext = createContext();

export const ListerProvider = (props) => {


    const [lists, setLists] = useState([
        {
            id: 1,
            items: [{ 
                    itemid: 1,
                    text: 'Hello'
                },
                { 
                    itemid: 2,
                    text: 'world'
                }]
        },
                {
            id: 2,
            items: [{ 
                    itemid: 2,
                    text: 'Test'
                }]
        }
    ]);


    return(
        <ListerContext.Provider value={[lists, setLists]}>
            { props.children }
        </ListerContext.Provider>
    );
}

I have been trying to change the nested arrays using the "setLists" method below but it is not working. What am I doing wrong here?

const removeListItem = (e) => {
    setLists((prevList)=>{
        for(var i = 0; i < prevList.length; i++){
            if(prevList[i].id === parseInt(e.target.value[2])){
                prevList[i].items = (prevList[i].items.filter(function(item) {
                    return item.itemid !== parseInt(e.target.value[0]);  
                }))
            }
        }
        return prevList;
    });
}