Javascript React-从数组中删除项而不重新排序列表

我很难理解为什么这个代码不起作用。它将从状态中的人员数组中删除该项，但不会在列表中重新排序

import { render } from 'react-dom';
import axios from 'axios';
import ReactLoading from 'react-loading';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import People from './components/People';
import './style.css';

interface PeopleData {
  name: string;
  eye_color: string;
}
interface PeopleResponse {
  results: PersonagemData[];
}

const App: React.FC = () => {
  const [loading, setLoading] = React.useState(true);
  const [people, setPeople] = React.useState([]);
  const isMobile = useMediaQuery('(max-width:768px)');
  
  React.useEffect(() => {
    axios.get<PeopleResponse>('https://swapi.dev/api/people/').then(response => {
      setPeople(response.data.results);
      setLoading(false);
      console.log(response)
    })
  }, []);

  const deleteChar = React.useCallback(index => {
    let aux = people;
    aux.splice(index, 1)
    setPeople(aux);
  }, [people])

  return (
      <div>
          {loading ? (
            <ReactLoading
            type={'spin'}
            color={'#800080'}
            height={'10%'}
            width={'10%'}
            /> 
            ):
              people.map((element, index) => 
              (<People
              index={index} 
              name={element.name} 
              color={element.eye_color} 
              deleteChar={deleteChar}
              />))
          }  
        </div>
    );
}

render(<App />, document.getElementById('root'));

从'react dom'导入{render}；
从“axios”导入axios；
从“反应加载”导入反应加载；
从“@material ui/core/useMediaQuery”导入useMediaQuery；
从“./组件/人员”导入人员；
导入“/style.css”；
接口人员数据{
名称：字符串；
眼睛颜色：字符串；
}
接口人员响应{
结果：个人资料[]；
}
常量应用程序：React.FC=（）=>{
常量[loading，setLoading]=React.useState（true）；
const[people，setPeople]=React.useState（[]）；
const isMobile=useMediaQuery（‘（最大宽度：768px）’）；
React.useffect（（）=>{
axios.get（）https://swapi.dev/api/people/）。然后（响应=>{
setPeople（响应、数据、结果）；
设置加载（假）；
console.log（响应）
})
}, []);
const deleteChar=React.useCallback（索引=>{
让aux=人；
辅助接头（索引，1）
setPeople（aux）；
}[人]）
返回(
{加载(
):
people.map（（元素，索引）=>
())
}  
);
}
render（
您需要对新列表进行解构：
设置人员（[…aux]）；
否则，React会认为什么都没有改变。
您说得对！既然您这么说了，我完全记得以前发生过同样的事情。谢谢。