Issue with dynamic form with text area field

Hello, I am having an issue with a dynamic form field I am using with a purchase request. Users can submit a purchase request for multiple items. Each item has a unit, name, and description. Everything works ok except the textarea field.

If I change the field type to a regular text field it works like it should. However, as a textarea field - when i enter text into the textarea field and then click "add" button to add another set of fields the textarea field disappears - not just the text the entire field. Then, as soon as I add text to that first field in the second row the text in the first row textarea shows up in the first row.

I am unable to attach an image.

Here is the the livewire component class

public $updateMode = false;

    public $inputs = [];

    public $i = 1;

    public $units, $itemName, $description;
    public $purchaseRequestType;
    public $selectedPurchaseRequestType;
    public $dateNeeded = '';
    public $responsibleOrganization;
    public $selectedResponsibleOrganization;

    protected $rules = [

        'selectedPurchaseRequestType' => ['required'],
        'selectedResponsibleOrganization' => ['required'],
        'dateNeeded' => ['required', 'date', 'date_format:m/d/Y', 'after:today'],
        'units.0' => ['required'],
        'itemName.0' => ['required'],
        'description.0' => ['sometimes'],
        'units.*' => ['required'],
        'itemName.*' => ['required'],
        'description.*' => ['sometimes'],

    ];

    protected $messages = [

        'selectedPurchaseRequestType' => 'You must select a request type.',
        'selectedResponsibleOrganization' => 'You must select a responsible organization.',

    ];
    public function mount()
    {
        $this->purchaseRequestType = PurchaseRequestType::orderBy('name')
            ->get()->toArray();
        $this->responsibleOrganization = PurchaseRequestResponsibleOrganization::orderBy('name')
            ->get()->toArray();

    }

    public function add($i)

    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }

    public function remove($i)

    {

        unset($this->inputs[$i]);

    }


    private function resetInputFields(){

        $this->units = '';
        $this->itemName = '';
        $this->description = '';

    }

and here is the blade file

<div>
    <form wire:submit.prevent="submitPurchaseRequest">
        <div class="row">
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="select-type" class="form-label">Purchase request type:</label>
                    <select
                            wire:model="selectedPurchaseRequestType"
                            name="type"
                            class="form-select" id="purchaseRequestType"
                    >
                        <option value="" selected>Please select a type</option>

                        @foreach($purchaseRequestType as $type)
                            <option value="{{$type['id']}}">{{$type['name']}}</option>
                        @endforeach
                    </select>
                    @error('category')
                    <p class="text-danger">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="min_create_date" class="form-label">Date needed by:</label>
                    <div
                            x-data="{ value: @entangle('dateNeeded'), picker: undefined }"
                            x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY', onOpen() { this.setDate($refs.input.value) } })"
                            x-on:change="value = $event.target.value"

                            class="input-group mb-3"

                    >
                        <span class="input-group-text"><i class="fa fa-calendar-alt"></i></span>
                        <input
                                x-ref="input"
                                x-bind:value="value"
                                type="text"
                                class="form-control"
                                wire:model="dateNeeded"
                                id="dateNeeded"
                                placeholder="MM/DD/YYYY"
                        >
                    </div>
                    @error('dateNeeded')
                    <p class="text-danger">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="select-type" class="form-label">Responsible organization:</label>
                    <select
                            wire:model="selectedResponsibleOrganization"
                            name="type"
                            class="form-select" id="purchaseRequestType"
                    >
                        <option value="" selected>Please select a type</option>
                        @foreach($responsibleOrganization as $org)
                            <option value="{{$org['id']}}">{{$org['name']}}</option>
                        @endforeach
                    </select>
                    @error('category')
                    <p class="text-danger">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>
        <div class="add-input">
            <div class="row">
                <div class="col-md">
                    <h4 class="card-header">Add line items</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="units.0">Quantity</label>
                        <input type="text" class="form-control" wire:model="units.0">
                        @error('units.0') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>

                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="itemName.0">Item Name</label>
                        <input type="email" class="form-control" wire:model="itemName.0">
                        @error('itemName.0') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="description.0">Description</label>
{{--                        <input type="description" class="form-control" wire:model="description.0">--}}
                        <textarea wire:model="description.0" class="form-control" id="description.0" rows="2"></textarea>
                        @error('description.0') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn text-white btn-info btn-sm mt-4" wire:click.prevent="add({{$i}})">Add</button>
                </div>
            </div>

        </div>
        @foreach($inputs as $key => $value)
            <div class="add-input">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="units.0">Quantity</label>
                            <input type="text" class="form-control" wire:model="units.{{ $value }}">
                            @error('units.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="itemName.0">Item Name</label>
                            <input type="text" class="form-control" wire:model="itemName.{{ $value }}">
                            @error('itemName.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="description.0">Description</label>
{{--                            <input type="description" class="form-control" wire:model="description.{{ $value }}">--}}
                            <textarea wire:model="description.{{ $value }}" class="form-control" id="description.0" rows="2"></textarea>
                            @error('description.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-danger btn-sm mt-4" wire:click.prevent="remove({{$key}})">remove</button>
                    </div>
                </div>
            </div>
        @endforeach
    </form>
</div>