While creating dynamic list containing TextField's, the user inputs & index are lost on adding or dismissing a list item (Flutter)

Building upon @Altay 's response, my answer solves updating index of an item problem too. I still have a question mentioned as a comment in the code below. Do we need to dispose removed TextControllers() from the list? how?

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<ValueKey> itemKeys = [];
  List<Map<String, dynamic>> itemsControllers = [];
  late List<InvoiceItemInput> itemsList;

  @override
  void initState() {
    super.initState();
    itemKeys.add(ValueKey('1' + DateTime.now().toString()));
    itemsControllers.add({
      'key': itemKeys[0],
      'itemControllers':
          Set<TextEditingController>.unmodifiable([TextEditingController()]) // Using Set here in case we have multiple text controllers here
    });
    itemsList = List<InvoiceItemInput>.from([
      InvoiceItemInput(
        parentWidth: 400.0,
        index: 1,
        key: itemKeys[0],
        controllers: itemsControllers[0]['itemControllers']!,
      )
    ]);
  }

  @override
  void dispose() {
    for (int k = 0; k < itemsControllers.length; k++) {
      itemsControllers[k]['itemControllers']
          .forEach((controller) => controller.dispose());
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) => Dismissible(
                    key: ValueKey(index.toString() + DateTime.now().toString()),
                    child: itemsList[index],
                    background: Container(color: Colors.red),
                    direction: DismissDirection.endToStart,
                    onDismissed: (direction) {
                      if (direction == DismissDirection.endToStart) {
                        final removeKey = itemKeys.elementAt(index);
                        itemKeys.removeAt(index);
                        itemsList.removeWhere(
                            (invoiceItem) => invoiceItem.key == removeKey);
                        itemsControllers.removeWhere(
                            (itemControl) => itemControl['key'] == removeKey);  // Question: Do we need to dispose these controllers removed, if so how can we do ?
                        itemsList.indexed
                            .forEach(((int, InvoiceItemInput) item) {
                          if (item.$2.index > item.$1 + 1) {
                            final replacementItem = InvoiceItemInput(
                              parentWidth: 400.0,
                              index: item.$1 + 1,
                              key: item.$2.key,
                              controllers: item.$2.controllers,
                            );
                            itemsList.removeAt(item.$1);
                            itemsList.insert(item.$1, replacementItem);
                          }
                        });
                        setState(() {});
                      }
                    }),
                itemCount: itemsList.length,
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 20.0),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: OutlinedButton(
                      child: Text('ADD'),
                      onPressed: () {
                        final int index = itemsList.length;
                        itemKeys.add(ValueKey(
                            index.toString() + DateTime.now().toString()));
                        itemsControllers.add({
                          'key': itemKeys[index],
                          'itemControllers':
                              Set<TextEditingController>.unmodifiable(
                                  [TextEditingController()])
                        });
                        setState(() {
                          itemsList.add(InvoiceItemInput(
                            parentWidth: 400.0,
                            index: index + 1,
                            key: itemKeys[index],
                            controllers: itemsControllers[index]
                                ['itemControllers'],
                          ));
                        });
                      }),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class InvoiceItemInput extends StatefulWidget {
  const InvoiceItemInput(
      {Key? key,
      required this.parentWidth,
      required this.index,
      required this.controllers})
      : super(key: key);
  final double parentWidth;
  final int index;
  final Set<TextEditingController> controllers;

  @override
  State<InvoiceItemInput> createState() => _InvoiceItemInputState();
}

class _InvoiceItemInputState extends State<InvoiceItemInput> {
  final double horizontalSpacing = 15.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 12.0),
        Container(
          padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 7.0),
          child: Text('Item ${widget.index}',
              style: Theme.of(context)
                  .textTheme
                  .labelLarge
                  ?.copyWith(color: Colors.white)),
          decoration: BoxDecoration(
              color: Colors.lightBlue,
              borderRadius: BorderRadius.circular(7.0)),
        ),
        SizedBox(height: 7.0),
        Wrap(
          spacing: this.horizontalSpacing,
          runSpacing: 25.0,
          children: [
            SizedBox(
              width: (widget.parentWidth - horizontalSpacing) / 2 < 200.0
                  ? (widget.parentWidth - horizontalSpacing) / 2
                  : 200.0,
              child: TextField(
                controller: widget.controllers.elementAt(0),
                decoration: InputDecoration(
                  labelText: 'Item Name *',
                  hintText: 'Enter Item Name',
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: 15.0),
      ],
    );
  }
}