I have an issue, I tried everything to get data from SQLite using electron, I can insert but not select, there's no error it just returns me undefined like it doesn't get the datas... Here's the main.ts file (I tried to create a getData() function but not recognized when requested in ipcMain.handle():

import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';
import { getAssetPath, getPreloadPath, getUIPath } from './pathResolver.js';
import { isDev } from './utils.js';
import { db, execute } from './db.js';
import sqlite3 from "sqlite3";

app.on("ready", () => {
    const appIcon = path.join(getAssetPath(), "./desktopIcon.png");
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: getPreloadPath()
        },
        icon: appIcon,
        // frame: false,
    });
    if (isDev()) {
        mainWindow.loadURL("http://localhost:5173");
    } else {
        mainWindow.loadFile(getUIPath());
    }
    
    const insertData = async (note: string) => {
        const dbs = await db()
        const sql = "INSERT INTO notes(note) VALUES (?)"
        try {
            await execute(dbs, sql, [note])
        } catch (error) {
            console.log(error)
        }
    }

    ipcMain.on('insert-note', async (event, note) => {
        await insertData(note);
    });

    ipcMain.handle('get-notes', async () => {
        const dbs = await db();
        const sql = "SELECT note FROM notes";
        try {
            await dbs.all(sql, (err, data) => {
                const notesDatas = data;
                console.log(notesDatas); //It displays correctly here
                return notesDatas;
            })
        } catch (error) {
            console.log(error);
            return [];
        }
      });
});
  

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });

And here's the App.tsx code:

import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [showForm, setShowForm] = useState(false);
  const [note, setNote] = useState('');
  const [notes, setNotes] = useState([]);

  const handleButtonClick = () => {
    if(showForm == true)
      setShowForm(false);
    else {
      setShowForm(true);
    }
  };

  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    window.electron.send('insert-note', note);
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNote(event.target.value);
  };

  const fetchNotes = async () => {
    const notesDatas = await window.electron.invoke('get-notes');
    setNotes(notesDatas || []); // Ensure notes is always an array
    console.log(notes); // --> Undefined 
    console.log(notesDatas) // --> Undefined
  };

  useEffect(() => {
    fetchNotes();
  }, []);

  return (
    <>
      <div className="menu">
        <button id="notes" onClick={handleButtonClick}>Notes</button>
      </div>
      <div className='notes-data'>
        <button onClick={fetchNotes}>Test</button>
      </div>
      {showForm && (
        <form onSubmit={handleFormSubmit}>
          <label>
            Note: 
            <input type="text" name="note" value={note} onChange={handleInputChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      )}
    </>
  )
}

export default App

I really don't know where is my mistake (if so) I didn't shared the db.db file because it correctly retrieve the data into the main.ts file but not into the App.tsx

I'm expecting to get the datas into my UI

I tried creating a getData() function but same error (this time the error occurred inside the handle function inside the main.ts like it can't return the datas or return it as undefined)

Thank you