React list component won't rerender after deleting one component from it

I am writing a kind of a ToDo app in React, which has Boards, Lists and Cards as components. I am using an API to do operations with these components. Board has a list of List components, List component has a list of Card components.

The Board filters the list of List components to only display the ones set as open. When I try to close a List from the Board, somehow the Board gets rerendered to only remove the last List component. I have checked it through Postman and the correct List gets closed, but I just can't get it to render properly. After refreshing the page, the Board component is rendered correctly, at the List components are displayed as expected.

Here is my code sample below.

//List component
 const archiveList = () => {
    fetch(
      `https://URL/${
        props.list.id
      }/closed?key=${API_KEY}&token=${TOKEN}&value=${true}`,
      {
        method: "PUT",
      }
    )
      .then((response) => response.json())
      .then(props.setLists(props.lists.filter((list) => list.id !== props.list.id)))
  };

//Board component

const [lists, setLists] = useState([]);
const { selectedBoard } = useContext(BoardContext);


useEffect(() => {
    fetch(
      `https://URL/${getBoardId()}/lists?key=${API_KEY}&token=${TOKEN}`
    )
      .then((response) => response.json())
      .then((data) => setLists(data.filter((d) => d.closed === false)));
  }, [selectedBoard]);

const displayLists = () => {
    return lists.map((list, i) => {
      return (
        <Cell key={i} col={12} shadow={1}>
          {list.idBoard === getBoardId() ? ( <div>
            <List list={list} setLists={setLists} lists={lists} />
           </div>
          ) : (
            <div></div>
          )}
        </Cell>
      );
    });
  };

I am still new to React so this confuses me quite a bit. Any help is greatly appreciated!