Using <InnerBlocks /> component generate error "Minified React error #130"

[RichForever]

Hi! I'm creating custom gutenberg blocks. I noticed that when I'm trying to use inside my block then I have React error. When I place pure <p> tag for example then it's working as expected. Below my code

edit.js

// eslint-disable prettier/prettier
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
import { __, sprintf } from "@wordpress/i18n";

import {
	InnerBlocks,
	SelectControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { useBlockProps } from "@wordpress/block-editor";
import Layout from "../components/Layout";
import "./editor.scss";
import { SPACING_OPTIONS, BREAKPOINTS, PADDING_CLASSES } from "./spacing";

// SelectControl component for selecting size values
function PaddingSelect({ attribute, label, setAttributes, attributes }) {
	const padding = attributes.padding || {};

	return (
		<SelectControl
			// translators: %s: padding position (e.g., "Top", "Bottom", "Left", "Right")
			label={sprintf(__("Padding %s", "tt-theme-blocks"), label)}
			value={padding[attribute] || ""}
			options={SPACING_OPTIONS}
			onChange={(newValue) =>
				setAttributes({
					padding: {
						...padding,
						[attribute]: String(newValue),
					},
				})
			}
		/>
	);
}

export default function Edit({ attributes, setAttributes }) {
	const { padding, layoutType } = attributes;
	
	// Get complete Tailwind classes based on padding values
	const paddingClasses = BREAKPOINTS.reduce((classes, { key }) => {
		const value = padding[key];
		if (value && PADDING_CLASSES[value]) {
			classes.push(PADDING_CLASSES[value][key]);
		}
		return classes;
	}, []).join(" ");
	
	const blockProps = useBlockProps({ className: paddingClasses });
	return (
		<>
			<Layout
				general={
					<ToggleGroupControl
						label="Layout type"
						value={layoutType}
						isBlock
						__nextHasNoMarginBottom
						__next40pxDefaultSize
						onChange={(val) =>
							setAttributes({
								layoutType: val,
							})
						}
					>
						<ToggleGroupControlOption value="fullwidth" label="Full width" />
						<ToggleGroupControlOption value="boxed" label="Boxed" />
					</ToggleGroupControl>
				}
				style={
					<>
						{BREAKPOINTS.map(({ key, label, attribute }) => (
							<PaddingSelect
								key={key}
								label={label}
								attribute={attribute}
								setAttributes={setAttributes}
								attributes={attributes}
							/>
						))}
					</>
				}
				advanced={<></>}
			/>

			<section {...blockProps}>
				<InnerBlocks />
				{/* { layoutType === 'boxed' ? (
					<div className="container mx-auto">
						<InnerBlocks />
					</div>
				) : (
					<InnerBlocks />
				) } */}
			</section>
		</>
	);
}

save.json

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 *
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Save() {
	const blockProps = useBlockProps.save();
	return (
		<div { ...blockProps }>
			<InnerBlocks.Content />
		</div>
	);
}

layout.js

import { InspectorControls } from "@wordpress/block-editor";
import { Card, CardBody, TabPanel } from "@wordpress/components";
import "./Layout.scss";
const Layout = ({ general, style, advanced }) => {
	return (
		<InspectorControls>
			<TabPanel
				className="customBlockControls__tabs"
				onSelect={() => {}}
				tabs={[
					{
						name: "general",
						title: "General",
						component: general,
					},
					{
						name: "style",
						title: "Style",
						component: style,
					},
					{
						name: "advanced",
						title: "Advanced",
						component: advanced,
					},
				]}
			>
				{(tab) => (
					<Card isRounded={false} variant="secondary">
						<CardBody>{tab.component}</CardBody>
					</Card>
				)}
			</TabPanel>
		</InspectorControls>
	);
};

export default Layout;

package.json

	"devDependencies": {
		"@commitlint/cli": "^19.7.1",
		"@commitlint/config-conventional": "^19.7.1",
		"@release-it/conventional-changelog": "^10.0.0",
		"@wordpress/scripts": "^30.11.0",
		"commitizen": "^4.3.1",
		"conventional-changelog-cli": "^5.0.0",
		"cz-conventional-changelog": "^3.3.0",
		"husky": "^9.1.7",
		"lint-staged": "^15.2.11",
		"release-it": "^18.1.2",
		"tailwindcss": "^3.4.17"
	},

[RichForever]

My bad. I was trying to import <InnerBlocks /> from @wordpress/components instead of @wordpress/block-editor