Livewire only supports one HTML element per component

Does livewire not like using @extends or @section in the livewire blade component? If I add a div before the @section the error goes away but almost nothing in livewire works. Not sure they are related. This blade component goes directly to my layout.

@extends('layouts.qblayout')

@section('content')

    <!-- Navigation -->
    <x-nav.qbnav></x-nav.qbnav>

    <!-- Main Content -->

    <div class="container mx-auto p-6 flex gap-6 max-w-5xl">
        <!-- Contractor Information -->
        <div class="border rounded p-4 w-1/2 shadow bg-gray-50">
            <h2 class="text-lg font-bold mb-4">Contractor Information</h2>
            <form class="space-y-4">
                <div>
                    <label for="contractor-name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" id="contractor-name" wire:model="contractor_name"
                        placeholder="Enter contractor name"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <p>Current Contractor Name: {{ $contractor_name }}</p>
                <div>
                    <label for="contractor-address" class="block text-sm font-medium text-gray-700">Address</label>
                    <input type="text" id="contractor-address" wire:model.lazy="contractor_address"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                    <p>Current Contractor Address: {{ $contractor_address }}</p>
                <div>
                    <label for="contractor-city-state" class="block text-sm font-medium text-gray-700">City,
                        State</label>
                    <input type="text" id="contractor-city-state" wire:model.lazy="contractor_city_state"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <div>
                    <label for="contractor-engineer" class="block text-sm font-medium text-gray-700">Engineer</label>
                    <input type="text" id="contractor-engineer" wire:model.lazy="engineer"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <div>
                    <label for="contractor-phone" class="block text-sm font-medium text-gray-700">Phone #</label>
                    <input type="text" id="contractor-phone" wire:model.lazy="phone_number"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
            </form>
        </div>
        <!-- Project Information -->
        <div class="border rounded p-4 w-1/2 shadow bg-gray-50">
            <h2 class="text-lg font-bold mb-4">Project Information</h2>
            <form class="space-y-4">
                <div>
                    <label for="project-name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" id="project-name" wire:model.lazy="project_name "
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <div>
                    <label for="project-address" class="block text-sm font-medium text-gray-700">Address</label>
                    <input type="text" id="project-address" wire:model.lazy="project_address"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <div>
                    <label for="project-city-state" class="block text-sm font-medium text-gray-700">City, State</label>
                    <input type="text" id="project-city-state" wire:model.lazy="project_city_state"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
                <div>
                    <label for="project-number" class="block text-sm font-medium text-gray-700">Project Number</label>
                    <input type="text" id="project-number" wire:model.lazy="project_number"
                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                </div>
            </form>
        </div>
    </div>

@endsection