无法使用对象的自定义数组typescript-react

class MyArray<T> {
  private data: T[];

  constructor() {
    this.data = [];
  }

  public add(item: T): void {
    this.data.push(item);
  }

  public remove(item: T): void {
    const index = this.data.indexOf(item);
    if (index > -1) {
      this.data.splice(index, 1);
    }
  }

  public find(item: T): T | undefined {
    return this.data.find((value) => value === item);
  }

  public getAll(): T[] {
    return this.data;
  }
}

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [myArray, setMyArray] = useState<MyArray<number>>(new MyArray<number>());

  const handleAdd = () => {
    myArray.add(1);
    setMyArray(myArray);
  };

  const handleRemove = () => {
    myArray.remove(1);
    setMyArray(myArray);
  };

  return (
    <div>
      <button onClick={handleAdd}>Add</button>
      <button onClick={handleRemove}>Remove</button>
      <ul>
        {myArray.getAll().map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;