title: Component not re-rendering after change in an array state in React
body: <p>The component is not rerendering after the deletion of an element in the state but the state does change.
  In the component, you can add an element in the array (which is a state) through form, see all the elements in the array, and delete it from the state using the button. So after deleting an element that is in the state, the component does not rerender. Following is the code of the component:</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import {
    Typography,
    IconButton,
    Button,
    TextField,
    Paper,
  } from '@mui/material';
  import {
    CancelOutlined,
    AddBoxOutlined,
    VisibilityOutlined,
    VisibilityOffOutlined,
  } from '@mui/icons-material';
  
  export default function Test1() {
    const [subNames, setSubNames] = useState([]);
    const [subName, setSubName] = useState('');
    const [showSubForm, setShowSubForm] = useState(false);
  
    const onSubNameChange = (e) =&gt; {
      setSubName(e.target.value);
    };
  
    const onSubNameSubmit = () =&gt; {
      if (!subName) return alert('Enter name!');
  
      setSubNames((prev) =&gt; prev.concat({ name: subName }));
      setShowSubForm(false);
      setSubName('');
    };
  
    const subForm = (
      &lt;&gt;
        &lt;div
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}&gt;
          &lt;TextField
            label='Sub Todo Name'
            onChange={onSubNameChange}
            name='subTodoName'
            value={subName}
            size='small'
            variant='outlined'
            fullWidth
          /&gt;
          &lt;IconButton onClick={onSubNameSubmit}&gt;
            &lt;AddBoxOutlined color='primary' /&gt;
          &lt;/IconButton&gt;
        &lt;/div&gt;
        &lt;br /&gt;
      &lt;/&gt;
    );
  
    const onDelete = (position, e) =&gt; {
      let arr = subNames;
  
      arr.splice(position, 1);
  
      setSubNames(arr);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
        {subNames.map((item, key) =&gt; (
          &lt;Paper
            key={key}
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              margin: 'auto',
              padding: 10,
              marginTop: 10,
              borderRadius: '10px',
            }}
            elevation={3}&gt;
            &lt;div sx={{ display: 'flex', alignItems: 'center' }}&gt;
              &lt;Typography variant='body1'&gt;
                &lt;b&gt;Sub Todo-{key + 1}:&lt;/b&gt;
              &lt;/Typography&gt;
              &amp;nbsp;
              &lt;Typography variant='body1'&gt;{item?.name}&lt;/Typography&gt;
            &lt;/div&gt;
            &lt;IconButton onClick={(e) =&gt; onDelete(key, e)}&gt;
              &lt;CancelOutlined color='primary' /&gt;
            &lt;/IconButton&gt;
          &lt;/Paper&gt;
        ))}
        &lt;br /&gt;
        {showSubForm &amp;&amp; subForm}
        &lt;div&gt;
          {showSubForm &amp;&amp; (
            &lt;Button
              variant='contained'
              sx={{ float: 'right' }}
              color='primary'
              size='small'
              startIcon={&lt;VisibilityOffOutlined /&gt;}
              onClick={() =&gt; setShowSubForm(false)}&gt;
              Add sub todo item
            &lt;/Button&gt;
          )}
          {!showSubForm &amp;&amp; (
            &lt;Button
              variant='contained'
              sx={{ float: 'right' }}
              onClick={() =&gt; setShowSubForm(true)}
              color='primary'
              size='small'
              startIcon={&lt;VisibilityOutlined /&gt;}&gt;
              Add sub todo item
            &lt;/Button&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>