为什么以下反应功能组件无法正常工作?

这很简单,当您按下“添加”时,它应该添加(然后添加),而当您按下“删除”时,它应该弹出最后一个元素并重新呈现列表,但不是。我在某个地方犯错了吗?

import React, { useState, useEffect } from 'react';


const Test = () => {
    const [list, setList] = useState([]);
    const add = () => {
        setList([list.length, ...list]);
    }

    const remove = () => {
        list.pop();
        setList(list);
    }

    useEffect(() => {
        console.log(list)
    }, [list])

    return (<ul>
        <button onClick={add}>add</button>
        <button onClick={remove}>remove</button>
        {list.map(el => <li>{el}</li>)}
    </ul>)
}

export default Test;

更新: 实际上,它通过删除最后一个元素来更新状态,但是仅在按下“添加”按钮时才进行重新渲染