cakephp react 導入

既存のcakephp3アプリにnpm buildしてreactを導入しようとしています。

ですが、ctpファイルにはidから何も読み込んでくれません。

routingかなと思ったのですが、記事がなさ過ぎて詰まっています。
どなたかご教示よろしくお願いします。

package.json

{
    "name": "webroot",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
    },
    "devDependencies": {
        "@babel/core": "7.11.6",
        "@babel/preset-env": "7.11.5",
        "@babel/preset-react": "7.10.4",
        "babel-loader": "^8.1.0",
        "webpack": "^5.0.0",
        "webpack-cli": "^4.0.0"
    },
    "dependencies": {
        "axios": "^0.21.0",
        "chart.js": "^2.9.4",
        "css-loader": "^5.0.1",
        "date-fns": "^2.16.1",
        "react": "^16.13.1",
        "react-datepicker": "^3.3.0",
        "react-dom": "^16.13.1",
        "react-truncate": "^2.4.0",
        "style-loader": "^2.0.0"
    },
    "private": true
}

default.ctp(あえてdefaultで入れてます。)
<body>
    <div class="wrapper">
        <?php echo $this->element('header'); ?>
        <div class="contents">
    <div id="app"></div>
            <?php echo $this->fetch('content') ?>
        </div>
        <?php echo $this->element('footer'); ?>
    </div>
</body>

webroot/app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return(
        <>
            <p>reactテスト</p>
        </>
          )

}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}


export default App;

何か根本的に間違っているのでしょうか？
buildは成功してます。

何か導入記事とか知ってるだけでも教えてほしいです！