I have an App with 2 inputs where you can choose 1 muscle and a number of exercices for this muscle.

I added an "Add" button to duplicates these inputs to add a new muscle to work with its number of exercices.

The problem is, when I change an input, all same inputs will change because they have the same key (I guess).

Anyone can show me how to solve this ?

Here is my code :

import { Formik, Form, Field } from "formik";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { getAllMuscles, numberOfExercices } from "../helpers/dataModuler";
import { setInLocalStorage } from "../helpers/localStorageHandler";

export const ProgramForm: React.FC<{}> = () => {
  const [numberOfMusclesInProgram, setNumberOfMusclesInProgram] = useState(1);

  const navigate = useNavigate();

  const listOfMuscles = getAllMuscles();

  const initialValues = {
    numberOfExercices: 0,
    muscle: listOfMuscles[0]
  };

  const handleSubmit = (values: {}) => {
    setInLocalStorage("program", values);

    navigate("/programme");
  };

  return (
    <>
      <Formik
        initialValues={initialValues}
        onSubmit={(values) => handleSubmit(values)}
      >
        <Form>
          <div id="container">
            {[...Array(numberOfMusclesInProgram)].map((n, i) => (
              <DisplayMuscleInProgram key={n} />
            ))}
          </div>

          <button
            onClick={() =>
              setNumberOfMusclesInProgram(numberOfMusclesInProgram   1)
            }
            type="button"
            className="rounded-md border"
          >
            Add
          </button>

          <div className="text-center">
            <button
              type="submit"
              className="mt-8 rounded-lg bg-primary p-2 text-white"
            >
              Let's gooooo