How i render checkboxes with nested array of objects

If i'm correct you want to show values of each checkbox and save the respective checkbox value when we toggle any checkbox. You have avalabilities array & in each object we have another day array. I render the all the avalabilities. Now when i toggle any checkbox, i pass three things to checkHandler:

1. e which is native event of checkbox
2. avIndex which is index of object in avalabilities array
3. index which is index of object in day array.

Now each day object, i set a key checked and store the value of that checkbox by getting the value from e.target.checked.

Hope this solve your problem

newState.avalabilities[avIndex].day[index].checked = e.target.checked;

import { useState } from 'react';

export default function App() {
    const [state, setState] = useState({
        firstName: '',
        lastName: '',
        mobileNumber: '',
        avalabilities: [
            {
                availabilityId: '',
                day: [
                    { value: 'sun', name: 'Sunday' },
                    { value: 'mon', name: 'Monday' },
                    { value: 'tue', name: 'Tuesday' },
                    { value: 'wed', name: 'Wednesday' },
                    { value: 'thur', name: 'Thursday' },
                    { value: 'fri', name: 'Friday' },
                    { value: 'sat', name: 'Saturday' }
                ],
                isChecked: false,
                checked: false,
                allChecked: false,
                error: null
            }
        ]
    });

    const checkedHandler = (e, avIndex, index) => {
        console.log(e.target.checked, avIndex, index);
        setState((prev) => {
            let newState = { ...prev };
            newState.avalabilities[avIndex].day[index].checked = e.target.checked;
            return newState;
        });
    };

    return (
        <>
            {state.avalabilities.map((av, avIndex) => (
                <div key={av.availabilityId}>
                    {av.day.map((item, index) => (
                        <div key={index}>
                            <input
                                checked={item?.checked || false}
                                onChange={(e) => checkedHandler(e, avIndex, index)}
                                type='checkbox'
                            />
                            <span>{item.name}</span>
                        </div>
                    ))}
                </div>
            ))}
        </>
    );
}