the user selects an option from a dataset and that calls an api. the api brings back an object with an array nested inside and those values are listed as checkboxes. the api also brings back a key named choose(const name primaryMax) signifying the amount of checkboxes that can be checked.

when you check a box it puts the name of that input into an array and when the array.length >= primaryMax it should lock any checkbox that is not already checked. you still need to be able to uncheck a checked box, which will re-enable the other checkboxes.

right now i have it set to disable the checkboxes when array.length >= primaryMax but it disables all of them. if the checkbox is checked it should be excluded from being disabled

//this sets the primaryMax to the choose value
//the api data starts at proficiency_choices
useEffect(() => {
    const primaryChoices = character?.class?.primary?.proficiency_choices
    setPrimaryMax(primaryChoices?.choose)
}, [primaryChoices])



useEffect(() => {

    const primaryProChoice = () => {
    
        const primaryChoices = character?.class?.primary?.proficiency_choices
        const secondaryChoices = character?.class?.secondary?.proficiency_choices

        const isEmpty = Object.keys(character?.class?.primary).length === 0
        const isSecondaryEmpty = Object.keys(character?.class?.secondary).length === 0
        
        //bard is set up differently so i excluded it and will add logic later to include it
        if(!isEmpty && character.class.primary.name !== 'Bard'){
            
            console.log(primaryMax)
       
            const isDisabled = chosenProPrimary.length >= primaryMax ? true : false   
            
            return setPrimaryProDiv(
                <div>
                    {primaryChoices[0].desc}
                    {primaryChoices[0].from.options.map((option, i) => {
                        //       
                        let isChecked

                        const handleCheck = (e) => {

                            
                            console.log(e)
                            const beenChecked = e.target.checked
                            if(beenChecked){
                                isChecked = true
                                setChosenProPrimary((prevPro) => [...prevPro, e.target.name])
                            }else if (!beenChecked){
                                isChecked = false
                                setChosenProPrimary((currentPro) => currentPro.filter((x) => x !== e.target.name))
                            }
                            console.log(chosenProPrimary)

                    
                        }

                        

                        return(
                            <p key={i}>
                               <input
                                    type='checkbox'
                                    name={option.item.index}
                                    onChange={handleCheck}
                                    disabled={isChecked ? false : isDisabled}
                                    
                                    />
                                <label htmlFor={option.item.index}>{option.item.name}</label> 
                            </p>
                        )
                    })}
                </div>
            )
                
            
        }
    
    }
    primaryProChoice()

//chosenProPrimary is the object selected from the dataset. it has all of the data from the api call

}, [chosenProPrimary, primaryMax])

i tried putting decideDisabled into the .map function, but it still disables every input