title: How can i add and remove components dinamically?
body: <p>I want to add and remove the components dynamically, so far just i can add, but when i tried to remove it remove too weird, lets say i dont want to remove just i would like to hide the components</p>
  <pre><code>import {
      MinusCircleOutlined,
      PlusOutlined,
  } from '@ant-design/icons'
  
  import { useState } from &quot;react&quot;
  
  const MyInput = ({ index, removeInput }) =&gt; {
      return (&lt;div &gt;
              &lt;Input placeholder=&quot;Email address&quot; /&gt;
          &lt;MinusCircleOutlined className=&quot;icon-left&quot; onClick={() =&gt; { removeInput(index) }} /&gt;
      &lt;/div&gt;
      )
  }
  
  const MyComponent = ({ }) =&gt; {
      const [form] = Form.useForm()
      const [index, setIndex] = useState(0)
      const [inputsFields, setInputsFields] = useState([])
      const [hiddenFields, setHiddenFields] = useState([])
  
      const AddInput = () =&gt; {
          const newInviteField = &lt;MyInput index={index} removeInput={removeInput} /&gt;
          setInputsFields([...inputsFields, newInviteField])
          const newIndex = index + 1
          setIndex(newIndex)
      }
  
      const removeInput = (currentIndex) =&gt; {
          let a = hiddenFields
          a.push(currentIndex)
          setHiddenFields([...a])
      }
  
      return (
          &lt;Card&gt;
              &lt;Form form={form} layout=&quot;vertical&quot;&gt;
                  &lt;Form.Item className='form-item item-container'&gt;
                      {inputsFields.map((item, index) =&gt; !hiddenFields.includes(index) &amp;&amp; &lt;div key={index}&gt;{item}&lt;/div&gt;)}
                  &lt;/Form.Item&gt;
                  &lt;Form.Item &gt;
                      &lt;a href=&quot;#&quot; onClick={AddInput}&gt;Add&lt;/a&gt;                     
                  &lt;/Form.Item&gt;
              &lt;/Form&gt;
          &lt;/Card&gt;)
  }
  </code></pre>
  <p>i tried to filter by the index, just showing the indexes does not into the hidden array <code>!hiddenFields.includes(index)</code></p>
  <p>the problem is when i am deleting, sometimes it is not deleting, sometimes other component is deleting</p>