React Uncaught TypeError: Cannot set properties of null (setting 'checked')

I'm using checkbox in react and the theme I'm using provides a hook but when my page loads I get a problem error. I am using checkbox for multiple delete action of elements in the table. I do not have a problem with deletion, but it generates an error on page load due to the check value.

this is the structure i use

https://facit-modern.omtankestudio.com/components/table

the hook i use

import React, { useEffect, useRef } from 'react';
import { useFormik } from 'formik';
import { Checks } from '../components/theme';

const useSelectTable = (data) => {
    const selectTable = useFormik({
        initialValues: {
            selectAll: false,
            selectedList: [],
        },
    });

    // Update Select List
    useEffect(() => {
        if (selectTable.values.selectAll) {
            selectTable.setValues({
                ...selectTable.values,
                selectedList: data.map((d) => d?.id?.toString()),
            });
        } else {
            selectTable.setValues({
                ...selectTable.values,
                selectedList: [],
            });
        }
        return () => {};
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectTable.values.selectAll]);

    // Select All -- indeterminate
    const ref = useRef(null);
    useEffect(() => {
        if (
            !!selectTable.values.selectedList.length &&
            selectTable.values.selectedList.length !== data.map((d) => d?.id?.toString()).length
        ) {
            ref.current.checked = false;
            ref.current.indeterminate = true;
        } else if (
            selectTable.values.selectedList.length === data.map((d) => d?.id?.toString()).length
        ) {
            ref.current.checked = true;
            ref.current.indeterminate = false;
        } else if (selectTable.values.selectedList?.length === 0) {
            ref.current.checked = false;
            ref.current.indeterminate = false;
        }
    }, [selectTable.values.selectAll, selectTable.values.selectedList, data]);

    const SelectAllCheck = (
        <Checks
            ref={ref}
            id='selectAll'
            onChange={selectTable.handleChange}
            checked={selectTable?.values?.selectAll}
        />
    );

    const selectItemHandleChange = selectTable.handleChange;
    const selectedIdList = selectTable?.values?.selectedList;

    return { selectTable, selectItemHandleChange, selectedIdList, SelectAllCheck };
};
export default useSelectTable;

usage:

const { selectTable, SelectAllCheck } = useSelectTable(slotData);

<td>
                    <Checks
                        id={slotAreas?.slot_number?.toString()}
                        name='selectedList'
                        value={slotAreas?.slot_number?.toString()}
                        onChange={selectTable?.handleChange}
                        checked={selectTable?.values?.selectedList.includes(
                            slotAreas?.slot_number?.toString(),
                        )}
                    />
                </td>

error javascript is a common error but I couldn't find a solution in react

can you help to solve this problem