React State reverting to default value

I am trying to update a Component from inside a nested component. But each time the state in the parent component gets reset to it's initial value.
Here is a simplified version of what I am trying to do:

The initial data:

    {
        id: 1,
        size: "large",
        name: "Antman",
        url: "https://images-na.ssl-images-amazon.com/images/I/91lviq1Lx6L._AC_UL320_SR320,320_.jpg"
    },
    {
        id: 2,
        size: "large",
        name: "Avatar",
        url: "https://images-na.ssl-images-amazon.com/images/I/91XXks9tlfL._AC_UL320_SR320,320_.jpg"
    },
    {
        id: 3,
        size: "large",
        name: "Shazam",
        url: "https://images-na.ssl-images-amazon.com/images/I/91mXAXL+jBL._AC_UL320_SR320,320_.jpg"
    },
    {
        id: 4,
        size: "large",
        name: "Test",
        url: "https://images-na.ssl-images-amazon.com/images/I/91mXAXL+jBL._AC_UL320_SR320,320_.jpg"
    }
];

Parent Component

function DragDrop() {
    const [blockList, setBlocklist] = useState(initblockList);

    const updateBlockList = (block, id) => {
        const update = blockList.filter(block => block.id !== id); //block list reverts to initState
        setBlocklist((update) => [...update]); //remove block from blocklist state
    }

    return (
        <>
            <AboveBoard
                blockList={blockList}
                setAbove={setAboveBoard}
                updateBlockList={updateBlockList}
            />
            <div className="blocks">
                {blockList.map((img, i) => {
                    return <Block key={`key-${i}`} id={img.id} url={img.url} />
                })}
            </div>
        </>
    )
}

export default DragDrop

Child Component

function AboveBoard({ blockList, setAbove, updateBlockList }) {
    const [board, setBoard] = useState([]);

    const [{ isOver }, drop] = useDrop(() => ({
        accept: "block",
        drop: (item) => addBlockToBoard(item.id),
        collect: (monitor) => ({
            isOver: !!monitor.isOver(),
        })
    }))
    const addBlockToBoard = (id) => {
        const currentBlock = blockList.filter(block => block.id === id);
        setBoard((board) => [...board, currentBlock[0]]); //add new block to board
        updateBlockList(currentBlock, id); //update parent board
    }

    return (
        <div className="aboveboard" ref={drop}>
            {board.map((img, i) => {
                return <UnBlock key={`key-${i}`} id={img.id} url={img.url} />
            })}
        </div>
    )
}

export default AboveBoard

This code is using React DND but the main issue is the blocklist state.
When I drag a card from blocks div it should update the blocklist state on the parent and remove it from the block list. Next update should filter through the updated state but the blocklist always reverts back to initial value when this line runs
const update = blockList.filter(block => block.id !== id);

Not sure why the state is being reset.

Thanks in advance. Any help is appreciated.

Well, because in the setBlocklist state setter where you're using the setter form, you're using the same name for the old state as well as the new(filtered) list as an update value.

Edit: Looking through your code & comments, I noticed that you're trying to pass the variable currentBlock to the updateBlockList state setter. Problem is, it's returned from the filter method as an array by default & so, it will be passed down as an array, thus the state will never be updated because the .id property doesn't exist on the block variable inside the filter method of the updateBlockList.

Solution would be using the .find method in the addBlockToBoard method or accessing the first index, i.e., currentBlock[0].

Edit: After taking a look at the code sandbox, the issue was the old state value being stale(stale closures), thus, the state was reset each time a change happened. In this case, we can only use the setter form of setState(prevState => ...);. Recommended reading about stale closures issue.

Here is the updated code:

The parent component:

function DragDrop() {
    const [blockList, setBlocklist] = useState(initblockList);

    const updateBlockList = (currentBlock, id) => {
        setBlocklist((prevState) => prevState.filter(block => block.id !== currentBlock.id));
    }

    return (
        <>
            <AboveBoard
                blockList={blockList}
                setAbove={setAboveBoard}
                updateBlockList={updateBlockList}
            />
            <div className="blocks">
                {blockList.map((img, i) => {
                    return <Block key={`key-${i}`} id={img.id} url={img.url} />
                })}
            </div>
        </>
    )
}

export default DragDrop

The child component:

function AboveBoard({ blockList, setAbove, updateBlockList }) {
    const [board, setBoard] = useState([]);

    const [{ isOver }, drop] = useDrop(() => ({
        accept: "block",
        drop: (item) => addBlockToBoard(item.id),
        collect: (monitor) => ({
            isOver: !!monitor.isOver(),
        })
    }))
    const addBlockToBoard = (id) => {
        const currentBlock = blockList.find(block => block.id === id);
        // OR
       // const currentBlock = blockList.filter(block => block.id === id)[0];
        setBoard((board) => [...board, currentBlock]); //add new block to board
        updateBlockList(currentBlock); //update parent board
    }

    return (
        <div className="aboveboard" ref={drop}>
            {board.map((img, i) => {
                return <UnBlock key={`key-${i}`} id={img.id} url={img.url} />
            })}
        </div>
    )
}