node.jsを使ってSQL実行結果を画面に表示したいです

前提・実現したいこと

SQL実行結果を受け取る方法がわからなくて困っています。

画面でボタンクリックし、SQL実行結果をレスポンスとして受け取りたいです

現状、ボタンクリック→SQL実行をしない関数の呼び出しの仕組みはできています。

発生している問題・エラーメッセージ

Uncaught (in promise) TypeError: Net.createConnection is not a function
---------------------
Connection.js:74 Uncaught (in promise) TypeError: Net.createConnection is not a function
    at Connection.connect (http://localhost:8080/static/js/vendors~main.chunk.js:102522:96)
    at http://localhost:8080/static/js/vendors~main.chunk.js:112655:16
    at connect (http://localhost:8080/static/js/vendors~main.chunk.js:112654:10)
    at http://localhost:8080/static/js/vendors~main.chunk.js:112576:23
From previous event:
    at new connection (http://localhost:8080/static/js/vendors~main.chunk.js:112572:71)
    at Object.push../node_modules/promise-mysql/index.js.exports.createConnection (http://localhost:8080/static/js/vendors~main.chunk.js:112509:10)
    at connection (http://localhost:8080/static/js/main.chunk.js:338:92)
    at exec (http://localhost:8080/static/js/main.chunk.js:349:3)
    at HTMLUnknownElement.callCallback (http://localhost:8080/static/js/vendors~main.chunk.js:122249:18)
    at Object.invokeGuardedCallbackDev (http://localhost:8080/static/js/vendors~main.chunk.js:122298:20)
    at invokeGuardedCallback (http://localhost:8080/static/js/vendors~main.chunk.js:122358:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:8080/static/js/vendors~main.chunk.js:122373:29)
    at executeDispatch (http://localhost:8080/static/js/vendors~main.chunk.js:126608:7)
    at processDispatchQueueItemsInOrder (http://localhost:8080/static/js/vendors~main.chunk.js:126640:11)
    at processDispatchQueue (http://localhost:8080/static/js/vendors~main.chunk.js:126653:9)
    at dispatchEventsForPlugins (http://localhost:8080/static/js/vendors~main.chunk.js:126664:7)
    at http://localhost:8080/static/js/vendors~main.chunk.js:126875:16
    at batchedEventUpdates$1 (http://localhost:8080/static/js/vendors~main.chunk.js:140560:16)
    at batchedEventUpdates (http://localhost:8080/static/js/vendors~main.chunk.js:122047:16)
    at dispatchEventForPluginEventSystem (http://localhost:8080/static/js/vendors~main.chunk.js:126874:7)
    at attemptToDispatchEvent (http://localhost:8080/static/js/vendors~main.chunk.js:124357:7)
    at dispatchEvent (http://localhost:8080/static/js/vendors~main.chunk.js:124275:23)
    at unstable_runWithPriority (http://localhost:8080/static/js/vendors~main.chunk.js:159418:16)
    at runWithPriority$1 (http://localhost:8080/static/js/vendors~main.chunk.js:129655:14)
    at discreteUpdates$1 (http://localhost:8080/static/js/vendors~main.chunk.js:140577:18)
    at discreteUpdates (http://localhost:8080/static/js/vendors~main.chunk.js:122059:16)
    at dispatchDiscreteEvent (http://localhost:8080/static/js/vendors~main.chunk.js:124241:7)

該当のソースコード

######TestPage.tsx
import React from "react";
import * as mysql from 'promise-mysql';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import TestTemplate from "../pages/templates/TestTemplate";

// SQL実行
const exec = function() {
async function connection() {
const connection = await mysql.createConnection({
host: 'XXXXXXXX',
port: XXXX,
user: 'XXXXXXXX',
password: 'XXXXXXXX',
database: 'XXXXXXXX',
multipleStatements: true
});

return connection;

}

connection().then(connection => {
console.log(connection);
const result = connection.query('SELECT * FROM test_table');
connection.end();

return result;

}).then(function(rows) {
console.log(rows);
});
}

const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};

const TestPage: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

return (
<TestTemplate title="TEST">
<Stack spacing={2} direction="row">
<Button variant="contained">Contained</Button>
<Button onClick={handleOpen}>Open modal</Button>
<Button onClick={exec}>query</Button>
<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" >
<Box sx={style}>
<Typography id="modal-modal-title" variant="h6" component="h2">
Text in a modal
</Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</Typography>
</Box>
</Modal>

  <Button variant="outlined">Outlined</Button>
</Stack>
  
  <>内容作成中</>
</TestTemplate>

);
};

export default TestPage;
ソースコード


### 試したこと
SQL実行処理（const exec = function() {....
だけ抜き出した「Test.js」を作り、
コマンドにて"node Test.js"実行→正常に実行できました。
また、MySqlWorkbench上でもSQLそのものには問題がないことは確認できています。

### 補足情報（FW/ツールのバージョンなど）
node.js@v14.18.0
TypeScript@Version 4.4.3
npm@6.14.15
express@4.17.1
promise-mysql@4.1.4
react@17.0.2
react-dom@17.0.2

調べたところcreateConnectionはWebブラウザで実行すべきでないということはわかりましたが、他の方法を見つけられていない状態です。
https://stackoverflow.com/questions/38005968/error-in-mysql-library-for-node-js