クラスのメソッドをこのようにアロー関数にして書きたかったのですが、

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  introduction = () => {
    console.log(`タイトル: ${this.title}、著者: ${this.author}`);
  };
}

class Manga extends Book {
  constructor(title, author, month) {
    super(title, author);
    this.month = month;
  }

  introduction = () => {
    super.introduction();
    console.log(`${this.month}月号です。`);
  };
}

const book = new Book("普通の本", "普通の人");
book.introduction();

const abc = new Manga("ABCコミック", "田中太郎", 5);
abc.introduction();

実行してみると

タイトル: 普通の本、著者: 普通の人
test.js:19 Uncaught TypeError: (intermediate value).introduction is not a function
    at Manga.introduction (test.js:19:11)
    at test.js:28:5

Book クラスの方は思ったとおりに動くのですが、
それを継承した Manga クラスの方では動いてくれませんでした。
クラスのメソッドにはアロー関数は使わない方がいいのでしょうか？
また、このように親の Book クラスの方だけ書き方を変えたら、

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  // ここだけ変更
  introduction() {
    console.log(`タイトル: ${this.title}、著者: ${this.author}`);
  }
}

class Manga extends Book {
  constructor(title, author, month) {
    super(title, author);
    this.month = month;
  }

  introduction = () => {
    super.introduction();
    console.log(`${this.month}月号です。`);
  };
}

const book = new Book("普通の本", "普通の人");
book.introduction();

const abc = new Manga("ABCコミック", "田中太郎", 5);
abc.introduction();

このように動きました。

test.js:9 タイトル: 普通の本、著者: 普通の人
test.js:9 タイトル: ABCコミック、著者: 田中太郎
test.js:21 5月号です。

この差は一体何なのでしょうか。教えていただきたいです。