我正在开发一个简单的简历应用程序，你可以在上面添加模块（经验，认证）到教育和工作等部分。有一个数组来存储这些模块，它是用挂钩const [components, setComponents] = useState([])设置的。我知道用这种方式初始化组件会添加第一个空元素。令人困惑的是，即使我遵循了文档https://beta.reactjs.org/learn/updating-arrays-in-state和其他一些指出相同实现的教程，我的第一个元素在方法中调用时不会被钩子覆盖。我也看了这个Stackoverflow的答案React hook array first value empty，它似乎是最接近我正在寻找的解决方案的一个，但我仍然不太明白钩子是如何更新数组的。
这是我的代码：

import React, { useState} from "react";
import Certification from "./certification";
import Experience from "./experience";
import Modules from "./modules";

export default function Section (props){
  const [components, setComponents] = useState([]);
  const [component, setComponent] = useState();

  function addComponent(title){
    
    setComponent();
    switch(title){
      case "Education":
        setComponent(<Certification/>);
        break;
      case "Work":
        setComponent(<Experience/>);
        break; 
      default:
        throw new Error (`Invalid panel type`);
    }

    setComponents([...components, component]);
  }

  function removeComponent(){
    setComponents([...components.slice(0, components.length-1)])
  }

    return(
      <div className="section">
        <h1>{props.title}</h1>
        <button onClick={()=>{addComponent(props.title)}}>Add</button>
        <button onClick={()=>{removeComponent()}}>Remove</button>
        <Modules modules={components}/>
      </div>
    );
}

有人能指出我在代码中遗漏了什么/做错了什么吗？
干杯！