Displaying dynamic list of sections within a livewire form modal

Question

I have a modal that adds certification table entry with section_id.

When I display the element with dynamic on main livewire component it works as expected but when I'm trying to add the same element on the modal that is displayed on click even on a button I end up with an error "foreach() argument must be of type array|object, null given"

Error: foreach() argument must be of type array|object, null given

Select element working as is on main livewire component:

       <div class="mt-4">
            <x-label for="sectionId" value="{{ __('Section') }}" />
            <select name="sectionId" wire:model="sectionId"
                class="border-gray-300 ">
                <option selected value=""> Select a value </option>
                @foreach ($sections as $section)
                    <option value="{{ $section->id}}"> {{ $section->name }} </option>
                @endforeach
            </select>
            @error('sectionId')
                <span class="error">{{ $message }}</span>
            @enderror
        </div>

When the exact same element is added to the modal that shows up on a button click, it errors out with the above error.

The dynamic data is loaded and displayed on the main component before opening the modal.