有没有可能用钩子来记忆未知数量的组件？

import React, { useState } from 'react';

const ComponentContainer = () => {
  const [components, setComponents] = useState([]);

  const addComponent = () => {
    setComponents(prevComponents => [...prevComponents, <Component />]);
  };

  const removeComponent = (index) => {
    setComponents(prevComponents => {
      const updatedComponents = [...prevComponents];
      updatedComponents.splice(index, 1);
      return updatedComponents;
    });
  };

  return (
    <div>
      <button onClick={addComponent}>添加组件</button>
      {components.map((component, index) => (
        <div key={index}>
          {component}
          <button onClick={() => removeComponent(index)}>删除组件</button>
        </div>
      ))}
    </div>
  );
};

const Component = () => {
  // 组件的内容
  return <div>这是一个组件</div>;
};

export default ComponentContainer;