How can I change multiple Checkboxes in React Hook Form Via state

Oky, so wasted like 12 hours already on this. And I really need help.

I created a filter using an array via Map that returns some checkbox components

Component:

import { useEffect, useState } from "react"

interface Checkbox {
    id: string | undefined,
    name: string,
    reg: any,
    value: any,
    label: string,
    required?: boolean,
    allChecked: boolean
}



const Checkbox = ({ id, name, reg, value, label, allChecked }: Checkbox) => {

    const [checked, setChecked] = useState(false);

    useEffect(() => {
        setChecked(allChecked);
    }, [allChecked])


    return (
        <>
            <label key={id}>

                <input type="checkbox"
                    {...reg}
                    id={id}
                    value={value}
                    name={name}
                    checked={checked}
                    onClick={() => {
                        setChecked(!checked)
                    }}
                    onChange={
                        () => { }
                    }
                />

                {label}

            </label>
        </>
    )
}

export default Checkbox;

Map:

                                    dataValues.sort()
                                        ?
                                        dataValues.map((e: any, i: number) => {

                                            let slug = e.replace(' ', '-').toLowerCase();
                                            return (
                                                <div key={JSON.stringify(e)} id={JSON.stringify(e)}
                                                >
                                                    <Checkbox id={slug}

                                                        name={title as string}
                                                        label={e as string}
                                                        value={e}
                                                        reg=
                                                        allChecked={allChecked}

                                                    />
                                                </div>
                                            )
                                        })
                                        :
                                        null
                                }

State that is just above the Map:

const [allChecked, setAllChecked] = useState<boolean>(false);

When I try to change the state on the parent and check or uncheck all of the checkboxes, nothing happens.

(the form works without a problem if I manually click on the checkboxes, but I cannot do this as I have some sections with over 40 values)

Sample of array:

dataValues = [
    "Blugi",
    "Bluza",
    "Body",
    "Bratara",
    "Camasa",
    "Cardigan",
    "Ceas",
    "Cercel",
    "Colier",
    "Fusta",
    "Geanta Cross-body",
    "Hanorac",
    "Jacheta",
    "Palton",
    "Pantaloni",
    "Pulover",
    "Rochie",
    "Rucsac",
    "Sacou",
    "Salopeta",
    "Set-Accesorii",
    "Top",
    "Trench",
    "Tricou",
    "Vesta"
]