When the modal popup and i edited it:

interface ModalTextProps
{
	layoutId: string;
	isOpen: boolean;
	onRequestClose: () => void;
	editedBlock: Block;
	onSave: (block: Block) => void;
}

const ModalText = ({ layoutId, isOpen, onRequestClose, editedBlock, onSave }: ModalTextProps) =>
{
	const [textInput, setTextInput] = useState<string>('');
	
	// Populate the text state with the existing user input when the modal opens
	useEffect(() =>
	{
		if (isOpen && editedBlock.isNew)
		{
			setTextInput('');// React.useState[setTextInput] - Empty user text input
		}
		else
		{
			setTextInput(editedBlock.content || '');// Add <Block>.content to React.useState[textInput]
		}
	}, [isOpen, editedBlock]);
	
	const handleSubmit = async (e: React.FormEvent) =>
	{
		e.preventDefault();// Prevent default form submission
		
		/**
		* Save Modal Block (LayoutEditor)
		* Requires the following:
		* 	id: number;
		*	userInput: string | JSONValueNoNull;
		*	isNewBlock: boolean
		*/
		const updateBlock =
		{
			id: editedBlock.i,// Use the same block ID
			userInput: textInput,// Updated user input from the form
			isNewBlock: false// Update status of block content
		};
		onSave(updateBlock);
		onRequestClose();
	};
	
	return (
		//...code...
	);
};

export default ModalText;

then the updateBlock calls saveModalBlock(); with onSave();... and try and save the new block content.


	const saveModalBlock = async (modal: { 
		id: string;
		userInput: string | JSONValueNoNull;
		isNewBlock: boolean
	}): void =>
	{
		const block = blocks.find(block => block.i === modal.id);
		if (!block)
		{
			logger.error(`No block found with id: ${modal.id}`);
			return;
		}
		
		// Updated block from *modal* user input
		const currentTimestamp = new Date().toISOString();// Returns a string in ISO format
		const updateBlock =
		{
			i: block.i,
			x: block.x,
			y: block.y,
			w: block.w,
			h: block.h,
			// TODO content: modal.userInput || block.content,// Update content based on user input
			content: modal.userInput,
			type: block.type,
			isNew: false,
			createdAt: block.createdAt || currentTimestamp,
			updatedAt: currentTimestamp
		};
		setBlocks(updateBlock);// 613 blocks.map is not a function.
		
		logger.log('Save modal block:', updateBlock);
		
		closeModal();// Call function
	};
	
But if I use setBlocks(); I get a error inside the onLayoutChange - const updatedBlocks = blocks.map(block =>... The error states
"blocks.map() is not a function"

	const onLayoutChange = (currentLayout: RGLLayoutItem[]): void =>
	{		
		// Combine updating *y* and validating boundaries in one pass
		let isValidLayout = true;
		
		const updatedLayout = currentLayout.map(item =>
		{
			// Find corresponding block for size reference
			const block = blocks.find(b => b.i === item.i);
			if (!block)
			{
				isValidLayout = false;// Invalid if block missing
				return item;
			}
			
			// Clamp *y* within grid bounds.
			const clampedY = Math.min(item.y, gridRows - 1);
			
			// Check if effectively the block fits in the grid
			if (item.x + block.w > gridCols || clampedY + block.h > gridRows)
			{
				isValidLayout = false;
			}
			
			return {
				...item,
				y: clampedY,
			};
		});
		
		if (!isValidLayout)
		{
			logger.warn('Warning: Blocks exceeds the grid boundaries.');
			return;
		}
		
		// React.setState[setLayouts]<Layouts> - Update layout state after validation
		setLayouts(updatedLayout);
		
		// Update block states based on the updated layout
		const updatedBlocks = blocks.map(block =>
		{
			const layoutItem = updatedLayout.find(item => item.i === block.i);
			if (!layoutItem)
			{
				return block;
			}
			
			const currentTimestamp = new Date().toISOString();
			return layoutItem ? {
				...block,
				x: layoutItem.x,
				y: layoutItem.y,
				w: layoutItem.w,
				h: layoutItem.h,
				createdAt: block.createdAt,
				updatedAt: currentTimestamp,
			} : block;// Keep the block unchanged
		});
		
		// React.setState[setBlocks]<Block> - Update blocks
		setBlocks(updatedBlocks);
		
		logger.log("Layout changed:", { updatedLayout, updatedBlocks });
	};

what am i doing wrong?