ReactJS onChange Issue - Not simple Issue

I am trying to create a modal to rule all, so that I don't have to play around making other models, sounds stupid, probably is, but I am kinda heading in this direction of keeping everything in one places so I can manage easily.

Here you can see I have a modal, called UpdateModal, take no notice, its all modals.

The problem I am having is that the onChange has stopped working and I am too drunk to figure it out. Please help me.

import React, { useState, useEffect } from 'react'
import Modal from '@/Components/Modal';

import DangerButton from '@/Components/DangerButton';
import PrimaryButton from '@/Components/PrimaryButton';

import { router } from '@inertiajs/react'
import { ImCross } from 'react-icons/im';

export default function ModalUpdate({ title, type, handleShow, sethandleShow, keys, obj }) {

    const [values, setValues] = useState(obj);

    function handleChange(e) {
        const key = e.target.id;
        const value = e.target.value
        setValues(values => ({
            ...values,
            [key]: value,
        }))
    }

    function ContentView() {
        switch (type) {
            case 'create':
                return <CreateView />;
            case 'update':
                return <UpdateView />;
            case 'delete':
                return <DeleteView />;
            default:
                return <NotFoundView />;
        }
    }

    function CreateView() {
        return <>
            {keys.map((key, index) => (
                <>
                    {
                        key != keys[0]
                        &&
                        <div>
                            <div className="capitalize p-2 border-b-2 border-gray-300 bg-gray-100 mb-2" placeholder="Course Us | XYZ Course">{key}</div>
                            {
                                key == 'desc'
                                    ?
                                    <textarea id={key} onChange={handleChange} className="w-full border-0" placeholder="Are you looking to boost your career or business through digital marketing? Our course is the perfect starting point. This comprehensive course is designed for beginners and marketing enthusiasts alike, covering the core concepts and strategies to thrive in the digital landscape." />
                                    :
                                    key == 'source'
                                        ?
                                        <input id={key} onChange={handleChange} type="file" className="w-full border-0" placeholder="Course Us | XYZ Course" />
                                        :
                                        <input id={key} onChange={handleChange} type="text" className="w-full border-0" placeholder="Course Us | XYZ Course" />
                            }
                        </div>
                    }
                </>
            ))}
        </>
    }

    function UpdateView() {
        return <>
            {keys.map((key, index) => (
                <>
                    {
                        key != keys[0]
                        &&
                        <div>
                            <div className="capitalize p-2 border-b-2 border-gray-300 bg-gray-100 mb-2">{key}</div>
                            {
                                key == 'desc'
                                    ?
                                    <textarea id={key} onChange={handleChange} className="w-full border-0" defaultValue={obj[key]} />
                                    :
                                    key == 'source'
                                        ?
                                        <input id={key} onChange={handleChange} type="file" className="w-full border-0" defaultValue={obj[key]} />
                                        :
                                        <input id={key} onChange={handleChange} type="text" className="w-full border-0" defaultValue={obj[key]} />
                            }
                        </div>
                    }
                </>
            ))}
        </>
    }


    function DeleteView() {
        return <>
            <div class="p-4 sm:p-10 overflow-y-auto">
                <div class="flex gap-x-4 md:gap-x-7">
                    <span class="flex-shrink-0 inline-flex justify-center items-center w-[46px] h-[46px] sm:w-[62px] sm:h-[62px] rounded-full border-4 border-red-50 bg-red-100 text-red-500 dark:bg-red-700 dark:border-red-600 dark:text-red-100">
                        <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                        </svg>
                    </span>

                    <div class="grow">
                        <h3 class="mb-2 text-xl font-bold text-gray-800 dark:text-gray-200">
                            Delete {obj.head}
                        </h3>
                        <p class="text-gray-500">
                            Permanently remove your {obj.head} and all of its contents from the platform. This action is not reversible, so please continue with caution.
                        </p>
                    </div>
                </div>
            </div>
        </>
    }

    function handleSubmit() {
        switch (type) {
            case 'create':

                break;
            case 'update':
                router.patch('/admin/curriculums/{curriculum}', values, { preserveScroll: true })
                break;
            case 'delete':
                break;
        }
    }

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

    return (
        <Modal show={handleShow}>
            <div className="p-4 md:p-8 w-full">
                <div className="mb-4 flex flex-row border-b-2 border-gray-300">
                    <p className="text-2xl p-2 capitalize">{type} {title}</p>
                    <ImCross onClick={() => sethandleShow(false)} className="text-2xl ml-auto text-red-700" />
                </div>
                <div className="space-y-4">
                    <ContentView />
                </div>
            </div>
            <div className="bg-slate-200">
                <div className="p-8 flex flex-row space-x-3 justify-end">
                    <DangerButton onClick={() => sethandleShow(false)}>Cancel</DangerButton>
                    <PrimaryButton onClick={() => handleSubmit()}>{type}</PrimaryButton>
                </div>
            </div>
        </Modal>
    )
}