Can't use JSX after npm run eject

I was following this tutorial and it's been a week I tried to resolve the issue:

SyntaxError: TestComponent.js: Unexpected token (5:6)

  3 |   render() {
  4 |     return (
> 5 |       <div>
    |       ^
  6 |         { this.props.children }
  7 |       </div>
  8 |     )

Currently, we have @babel/preset-env, @babel/preset-react, @babel/cli in 2019 rather than the tutorial pointing to babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-cli.

So, using them in package.json doesn't solve the issue:

"babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  }

I have tried several ways but nothing stopping the error. I hope someone has resolved the issue and can provide a solution.

Greatly appreciated!

from Can't use JSX after npm run eject