javascript: непонятное поведение при использовании синглтона (в примитивном react компоненте)

реализовал синглтон, от которого наследуется другой класс:

class ISingleton
{
    private static _instance?: ISingleton;

    counter: number = 10

    constructor() {
        if (ISingleton._instance)
            return ISingleton._instance;

        ISingleton._instance = this;
    }
}

export class IData extends ISingleton
{
    counter2: number = 10
}

Написал компонент с 2 кнопками - при нажатии на кнопки счетчики увеличиваются и уменьшаются:

class App extends React.Component<any, any> {

  updateCounter = (delta: number) => {

    const data: IData = new IData();
    data.counter += delta;
    data.counter2 += delta;

    console.log(data);
  }

  render() {
    return (
      <div className = "App">
        <button className = "btn" onClick = {() => this.updateCounter(-1)}>Dec</button>
        <button className = "btn" onClick = {() => this.updateCounter(+1)}>Inc</button>
      </div>
    );
  }
}

export default App;

При нажатии несколько раз на кнопку Inc и кнопку Dec наблюдаю следующее:

Объясните мне пожалуйста, почему counter2 уникален для каждой кнопки и меняется только 1 раз для нажатия на каждую кнопку, а counter работает как и ожидается - он общий для всех кнопок и меняется при нажатии на любую кнопку