Nested array fields

[h4mmad]

I'm stuck while rendering fields for nested arrays:

The type definition is below, the containers array has another array within It called ports.
When a user clicks on add a container, a container is rendered with inputs for name and image, there is another button, within the container, when clicked should render an input for the port.

I'm not able to render it.

I will also attach the UI

export type deploymentInput = {
  namespace: string;
  deploymentName: string;
  deploymentLabels: { key: string | number; value: string | number }[];
  deploymentSpec: {
    selector: {
      matchLabels: {
        [key: string]: string;
      }[];
    };
    replicas: number;
    podTemplate: {
      podMetadata: {
        podLabels: {
          [key: string]: string;
        }[];
      };
      podSpec: {
        containers: {
          name: string;
          imagePullPolicy: string;
          image: string;
          ports: { key: string | number; value: string | number }[];
        }[];
      };
    };
  };
};

React code below:

const PodTemplate = ({ register, control }: props) => {
  const { append, fields, insert, remove } = useFieldArray({
    name: "deploymentSpec.podTemplate.podSpec.containers",
    rules: { maxLength: 1 },
    control,
  });

  return (
    <>
      <div>
        <div className="flex justify-between items-baseline">
          <p className="text-xl ">Pod details (template)</p>
          <button
            type="button"
            className="px-3 text-sm py-1 hover:bg-lime-300 rounded-full"
            onClick={() =>
              append({ image: "", imagePullPolicy: "", name: "", ports: [] })
            }
          >
            Add container +
          </button>
        </div>

        <div className="w-full p-8 mt-2 shadow border  rounded-xl bg-white">
          <div className="flex flex-row flex-wrap">
            {fields.map((container, containerIndex) => {
              console.log(container.ports);
              return (
                <div
                  className="bg-gray-200 flex flex-col rounded-xl p-4 mr-4 mt-4 w-fit space-y-8 "
                  key={container.id}
                >
                  <div>
                    <label className="block">Container image</label>
                    <input
                      {...register(
                        `deploymentSpec.podTemplate.podSpec.containers.${containerIndex}.image` as const,
                        { required: true }
                      )}
                      className="p-2 rounded-lg border"
                      placeholder="nginx"
                    />
                  </div>
                  <div>
                    <label className="block">Container name</label>
                    <input
                      className="p-2 rounded-lg border"
                      {...register(
                        `deploymentSpec.podTemplate.podSpec.containers.${containerIndex}.name` as const
                      )}
                    />
                  </div>

                  <button type="button" className="w-fit self-end">
                    Add port
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

When add container is clicked a container is rendered out.
I want to render out an input when 'Add port' is clicked.
Any help?