Layout of form inside livewire component not working

$form
            ->schema([

                TextInput::make('name')->required()->columnSpan(1),
                TextInput::make('surname')->required(),
                TextInput::make('phone')
                                    ->columnSpanFull(),
                TextInput::make('email')->email()
                                    ->columnSpanFull(),
            ])
            ->columns(2)
            ->statePath('shipping');

<div style="--cols-default: repeat(1, minmax(0, 1fr)); --cols-lg: repeat(2, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] lg:grid-cols-[--cols-lg] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'baCZW3ia3kfG83hsAfwG') {
                return
            }
            $nextTick(() => {
                let error = $el.querySelector('[data-validation-error]')
                if (! error) {
                    return
                }
                let elementToExpand = error
                while (elementToExpand) {
                    elementToExpand.dispatchEvent(new CustomEvent('expand'))

                    elementToExpand = elementToExpand.parentNode
                }
                setTimeout(
                    () =>
                        error.closest('[data-field-wrapper]').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start',
                            inline: 'start',
                        }),
                    200,
                )
        })">