Buradan baka bilirsin

Bu kullanımı öneriyorum

const imgs = document.querySelectorAll('.yenieklenenresim');
const buyukResim = document.querySelector('#yenieklenensliderbuyukresim');

imgs.forEach((img, i) => {
    img.addEventListener('click', () => {
        const src = imgs[i].src;
        buyukResim.innerHTML = src
    })
})

Merhaba kardeşim. useEffect ile state-de değişiklik olub-olmadığına bakmalısın. Bunla beraber onSubmit-e ihtiyaç yok zaten action-dan sana değer dönecektir. Birde initialState-e sadece döndürdüğün değerleri(success ve status) yazmalısın. Son olarak useFormStatus-u button-u ayrıca component yapıp onun içerisine koymalısın. Kullanım Örnek:

'use client'

import { useRouter } from 'next/navigation'
import { useFormState, useFormStatus } from 'react-dom'
import { createMessage } from '@/actions/action'
import { useEffect } from 'react'
import { toast } from 'react-toastify';

const initialState = {
    status: '',
    success: false
}


function Form(){
  const [state, formAction] = useFormState(createMessage, initialState);
  

    useEffect(() => {
        console.log(state?.status, state?.success) // toast-la göstere bilirsin
    }, [state?.status, state?.success)
  return (
    
    <div className='text-center p-10 text-Background'>
    <form action={formAction} className='max-w-md mx-auto lg:p-8'>
        <div className='space-y-4'>
            <input type="text" name='name' placeholder="First Name" className='w-full p-2 border rounded-xs outline-none' required/>
            <input type="text" name='surname' placeholder="Last Name" className='w-full p-2 border rounded-xs outline-none' required/>
            <input type="tel" name='phone' placeholder="Phone Number" className='w-full p-2 border rounded-xs outline-none' required/>
            <input type="email" name='mail' placeholder="Mail address" className='w-full p-2 border rounded-xs outline-none' required/>
            <textarea name="message" placeholder="Write your message:" className='w-full p-2 border rounded-xs h-32 resize-none outline-none'required></textarea>
        </div>
       <SubmitButton />
    </form>
    
</div>

  )
}

export default Form



function SubmitButton() {
  const {pending} = useFormStatus();
  return <button disabled={pending}>Submit</button>
}

https://www.prisma.io/docs/guides/other/multi-schema burada her şey açıklanmış buraya baka bilirsin.

Merhaba kardeşim. öncelikle CRA(create-react-app) proje kurmanı tavsiye etmem. Bunun için Vite var. Hızlı ve optimize edilmiş web uygulamaları oluşturmana yardımcı olucaktır. CRA-nı kullanılmama sebepi artık ithiyaçları karşılamaması ve kısıtlamalar var. npx create-vite@latest terminalda yazarak projeni kura bilirsin.

Cevaplarınız için çok teşekkür ederim.