my code is not working properly and wonder if you could help figure out why. Here is my code:

// Wrapping Responsive in WidthProvider to handle width calculations for the grid layout
const ResponsiveGridLayout = WidthProvider(Responsive);

// Define a set of block sizes and their attributes
const BLOCK_SIZES = [
	{ id: 'photo', width: 2, height: 2, content: 'Photo' },
	{ id: 'contact', width: 2, height: 3, content: 'Contact Us' },
	{ id: 'logo', width: 1, height: 1, content: 'Logo' },
];

const App = () => {
	
	const [blocks, setBlocks] = useState([]);// Current blocks on the grid
	const [newBlockCount, setNewBlockCount] = useState(0);// Counter for new blocks added
	const [layout, setLayout] = useState([]);// Layout of blocks
	const [editingBlock, setEditingBlock] = useState(null);// Currently edited block
	
	// Constants defining grid dimensions
	const ROW_HEIGHT = 120;
	const GRID_COLS = 6;
	const GRID_ROWS = 8;
	
	/**
        * Calculate Maximum Blocks per Grid
        * Function to calculate max blocks based on current layout
        * This replaces the previous constant MAX_BLOCKS calculation
        */
	const calculateMaxBlocks = (blockList) => {
		
		 // Create an object to track occupied spaces
		const occupiedSpaces = blockList.reduce((acc, block) => {
			
			// Loop through the height and width of each block to mark occupied spaces
			for (let dy = 0; dy < block.h; dy++) {
				for (let dx = 0; dx < block.w; dx++) {
					
					// Generate a key for the occupied cell
					const key = `${block.x + dx},${block.y + dy}`;
					acc[key] = true;// Marking occupied space
				}
			}
			
			return acc;
		}, {});
		
		// Calculate and return the maximum number of unoccupied blocks
		return GRID_COLS * GRID_ROWS - Object.keys(occupiedSpaces).length;
	};
	
	/**
        * Add Block
        * Function to add a new block to the grid
        */
	const handleAddBlock = (width, height, content, id) => {
		
		// Get the maximum number of blocks allowed
		const MAX_BLOCKS = calculateMaxBlocks(blocks);
		
		// Check if the current number of blocks exceeds the limit
		if (blocks.length >= MAX_BLOCKS) {
			
			alert("Maximum number of blocks reached!");
			return;
		}
		
		const newId = `block-${id}-${newBlockCount}`;// Generate unique ID for the new block
		let availablePosition = null;	
		
		// Loop through potential grid positions to find a place for the new block
		for (let y = 0; y < GRID_ROWS; y++) {
			for (let x = 0; x < GRID_COLS; x++) {
				
				// Flag to check if the block can be placed
				let canPlace = true;
				
				// Check if new block fits within grid boundaries
				if (x + width > GRID_COLS || y + height > GRID_ROWS) {
					
					canPlace = false;
					continue;
				}
				
				// Check for overlapping blocks in the proposed position
				for (let dy = 0; dy < height; dy++) {
					for (let dx = 0; dx < width; dx++) {
						
						// Check if there's an existing block in the proposed space
						//if (blocks.some(block => block.x === x + dx && block.y === y + dy)) {
						if (blocks.some(block => {
							
							const isOverlap = block.x === (x + dx) && block.y === (y + dy);
							return isOverlap;
						})) {
							canPlace = false;
							break;
						}
					}
					
					if (!canPlace) {
						
						// Exit if it can't be placed
						break;
					}
				}
				if (canPlace) {
					
					// Save the position if valid
					availablePosition = { x, y, w: width, h: height };
					break;
				}
			}
			if (availablePosition) {
				
				// Exit outer loop
				break;
			}
		}
		if (availablePosition) {
			
			// Add new block to state
			setBlocks(prevBlocks => [
				
				...prevBlocks,
				{ i: newId, x: availablePosition.x, y: availablePosition.y, w: width, h: height, content: content }
			]);
			
			// Increment the count of new blocks added
			setNewBlockCount(prevCount => prevCount + 1);
			
			// Update layout with the new block's dimensions and position
			setLayout(prevLayout => [...prevLayout, { i: newId, ...availablePosition }]);
		}
		else {
		
			alert("No available space to add a new block!");
		}
	};
	
	/**
        * Remove Block
        * Function to remove a block from the grid
        */
	const handleRemoveBlock = (id) => {
		
		// Update blocks and layout state to remove the block specified by ID
		setBlocks(prevBlocks => prevBlocks.filter(block => block.i !== id));
		setLayout(prevLayout => prevLayout.filter(item => item.i !== id));
	};
	
	/**
	* Edit Block
        * Function to set a block to be edited
        */
	const handleEditBlock = (block) => {
		
		// Set the block that is currently being edited
		setEditingBlock(block);
	};
	
	/**
        * Save Block Content
        * Function to save the updated content of an edited block
        */
	const handleSaveBlockContent = (newContent) => {
		
		if (!editingBlock) {
			
			// Exit if there's no block being edited
			return;
		}
		
		// Update blocks state with edited content
		setBlocks(prevBlocks => 
			prevBlocks.map(block => (block.i === editingBlock.i ? { ...block, content: newContent } : block))
		);
		
		// Clear editing state
		setEditingBlock(null);
	};
	
	/**
        * Layout Change
        * Function to handle updates to the grid layout
        */
	const handleLayoutChange = (newLayout) => {
		
		const updatedLayout = newLayout.map(item => {
			
			// Update the layout ensuring the y position does not exceed grid boundaries
			return {
				...item,
				y: Math.min(item.y, GRID_ROWS - 1),// Ensure y position does not exceed GRID_ROWS
			};
		});
		
		// Update layout state
		setLayout(updatedLayout);
		
		// Check if the newly set layout is valid
		const validLayout = updatedLayout.filter((item, index) => {
			
			const block = blocks.find(b => b.i === item.i);
			return block && item.x + block.w <= GRID_COLS && item.y + block.h <= GRID_ROWS;
		});
		
		// Update block states to reflect the new layout
		setBlocks(layout => layout.map(block => {
			
			// Find corresponding block
			const layoutItem = updatedLayout.find(item => item.i === block.i);
			return layoutItem ? { ...block, x: layoutItem.x, y: layoutItem.y, w: layoutItem.w, h: layoutItem.h } : block;
		}));
	};

the issue is when adding blocks code is no longer calculating properly how many blocks can fit into it based on the grid size, if i keep adding blocks, only time it stops is when it reaches maximum number.