Not sure how to write this properly. Basically, I need the data to be fetched and render. Currently not using separated prisma client there(because there is way to do this by separating the prisma).

import React from 'react'
import Default from '../shared/Default'
import { prisma } from '../../lib/prisma'
import { Transaction } from '@prisma/client'

export default async function Page() {
    const data: Transaction[] = await prisma.transaction.findMany({
        include: {
            category: true,
            account: true,
        },
    })

    return (
        <Default>
            <h1>Sample Data Fetching</h1>
            <>
                <dialog id='transaction_modal' className='modal'>
                    <form method='dialog' className='modal-box'>
                        <h3 className='font-bold text-lg'>Hello!</h3>
                        <p className='py-4'>Press ESC key or click outside to close</p>
                    </form>
                    <form method='dialog' className='modal-backdrop'>
                        <button type='button'>Close</button>
                    </form>
                </dialog>
                <button
                    className='btn btn-sm'
                    onClick={() => window.my_modal_2.showModal()}
                    type='button'
                >
                    Open modal
                </button>
            </>
            <div className='max-h-screen overflow-x-auto'>
                <table className='table table-pin-rows'>
                    <thead>
                        <tr>
                            <th>Account ID</th>
                            <th>Transaction ID</th>
                            <th>Amount</th>
                            <th>Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map((t) => (
                            <tr key={t.id}>
                                <td>{t.id}</td>
                                <td>{t.accountId}</td>
                                <td>{t.amount}</td>
                                <td>{t.note}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </Default>
    )
}

Then how do i handle the modal(let say for a transaction input - send data back to prisma). If it is not hard to achieve.