"ReferenceError: Must call super..." when passing raw JSX arg to super in derived class

Question

Trying to run the following in a React app gives the ReferenceError (below). Why? I'm calling super(). Is the JSX somehow "accessing 'this'"?

class Base {
  constructor(foo) {
    this.foo = foo
  }
}

class Extender extends Base {
  constructor() {
    super(<p>foo</p>)
  }
}

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
new Extender
src/Component01.js:29
  26 | 
  27 | class Extender extends Base {
  28 |   constructor() {
> 29 |     super(<p>foo</p>)
  30 |   }
  31 | }
  32 | 

Whereas the following (which breaks the encapsulation of the first example, so I don't want to do it) runs fine:

class Base {
  constructor(foo) {
    this.foo = foo
  }
}

const someJsx = <p>foo</p>
class Extender extends Base {
  constructor() {
    super(someJsx)
  }
}

?