title: React modal update item bug
body: <p>During the update process, it updates the information of the same id value every time, what could be the problem? for example, it updates the field with id number 3 on every update operation. I am using the index value in the loop for the update process</p>
  <p><a href="https://i.stack.imgur.com/zSTaD.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/kmykv.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{cardItemData.map((cardItem, index) =&gt; (
  &lt;&gt;
      &lt;tr id={index}&gt;
          &lt;td&gt;{cardItem.min}&lt;/td&gt;
          &lt;td&gt;{cardItem.price}&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;Modal
          titleId
          isOpen={modalState}
          setIsOpen
          isStaticBackdrop
          isScrollable
          isCentered
          size
          isAnimation&gt;
          &lt;ModalHeader
              className
              setIsOpen={() =&gt;
                  setModalState(false)
              }&gt;
              &lt;ModalTitle id&gt;
                  Update
              &lt;/ModalTitle&gt;
          &lt;/ModalHeader&gt;
          &lt;ModalBody&gt;
              &lt;div className='row'&gt;
                  &lt;div className='col-lg-4'&gt;
                      &lt;FormGroup
                          id='cardMinUp'
                          label={t(
                              'form.cardMin',
                          )}
                          isFloating&gt;
                          &lt;Input
                              type='number'
                              placeholder={t(
                                  'form.cardMin',
                              )}
                              isValid={
                                  formik.isValid
                              }
                              value={
                                  formik
                                      .values
                                      .cardMinUp
                              }
                              onChange={
                                  formik.handleChange
                              }
                              isTouched={
                                  formik
                                      .touched
                                      .cardMinUp
                              }
                              invalidFeedback={
                                  formik
                                      .errors
                                      .cardMinUp
                              }
                          /&gt;
                      &lt;/FormGroup&gt;
                  &lt;/div&gt;
                  &lt;div className='col-lg-4'&gt;
                      &lt;FormGroup
                          id='cardPriceUp'
                          label={t(
                              'form.cardPrice',
                          )}
                          isFloating&gt;
                          &lt;Input
                              type='number'
                              placeholder={t(
                                  'form.cardPrice',
                              )}
                              isValid={
                                  formik.isValid
                              }
                              value={
                                  formik
                                      .values
                                      .cardPriceUp
                              }
                              onChange={
                                  formik.handleChange
                              }
                              isTouched={
                                  formik
                                      .touched
                                      .cardPriceUp
                              }
                              invalidFeedback={
                                  formik
                                      .errors
                                      .cardPriceUp
                              }
                          /&gt;
                      &lt;/FormGroup&gt;
                  &lt;/div&gt;
                  &lt;div className='col-lg-4 mt-2'&gt;
                      &lt;Button
                          onClick={() =&gt; {
                              dispatch(
                                  agencySlice.editUpdateCardItem(
                                      {
                                          id: index,
                                          min: formik
                                              .values
                                              .cardMinUp,
                                          price: formik
                                              .values
                                              .cardPriceUp,
                                      },
                                  ),
                              );
  
                              setModalState(
                                  false,
                              );
                          }}
                          className='me-3'
                          icon='plus'
                          isOutline
                          color='info'&gt;
                          Save
                      &lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ModalBody&gt;
      &lt;/Modal&gt;
  &lt;/&gt;
  ))}</code></pre>
  </div>
  </div>
  </p>