useState Object's value is always the initial value

Question

I have code where if a function is invoked it will call toggleCheckedUser and pass along information about which object property to toggle. Then saves the modified object back to state (selectedSendTo).

However, when I run this, the toggle it works, but when I try to edit a second property, before changing it I try console.log(selectedSendTo) I always get the initial value whether it be an empty object {} or false instead of the previously updated object.

When I use useEffect to spy on selectedSendTo I can see that the setSelectedSendTo() function correctly updated the object. So for some reason when I revisit the object it's empty.

const [selectedSendTo, setSelectedSendTo] = useState(false);

const toggleCheckedUser = (companyID, contactID) => {
    console.log(companyID, contactID); 
    console.log(selectedSendTo); // THIS VALUE IS always the same as INITIAL value
    console.log(selectedSendTo[companyID]);
    if(selectedSendTo[companyID] && 
        selectedSendTo[companyID][contactID] === true){
            //remove it
            delete(selectedSendTo[companyID][contactID]);
    }else{
        setSelectedSendTo({
            ...selectedSendTo,
            [companyID]:{
                ...selectedSendTo[companyID],
                [contactID]: true,
            }
        })
    }
}

Here is the DOM:

<CustomCheckbox 
    className="person__checkbox" name={`checkbox-${contactID}`}
    alreadySelected={
       selectedSendTo[company.companyID] &&
       selectedSendTo[company.companyID][contactID]
      }
    onChange={() => toggleCheckedUser(company.companyID, contactID)} 
/>

UPDATE, A POSSIBLE SOLUTION

I found that the following works:

To be able to access the current value from useState I used useRef

const selectedSendToRef = useRef();

useEffect( () => {
        selectedSendToRef.current = selectedSendTo;
    }, [selectedSendTo])

Then inside of my function, I can use selectedSendToRef.current to access the most recent value of `selectedSendTo.

When updating state, I can access the most recent version from state using

setSelectedSendTo( prevValue => ....)

const toggleCheckedUser = (companyID, contactID) => {
    console.log(companyID, contactID, selectedSendToRef.current);
    console.log('selectedSendTo[companyID]: ', selectedSendTo[companyID]);

    let newValue; 
    if(selectedSendToRef.current[companyID] && 
        selectedSendToRef.current[companyID][contactID] === true){
        newValue = false;
    }else{
        newValue = true;
    }
    setSelectedSendTo(prevValue => (
        {
            ...prevValue,
            [companyID]:{
                ...prevValue[companyID],
                [contactID]: newValue,
            }
        }
    ));
}

UPDATE 2: The Real Solution

Okay so it seems like the problem was that even after a render, the child component was not receiving the updated state because of how I had used nested functions to create the elements.

Here is how I had things

<Main Component>
    <div>
      {Object_1}
    <div>
</Main Componenent

and object_1 was defined something like this:

const Object_1 = 
   <React.Fragment>
        <h1>Random Header</h1>
        {StateObject_Containg_Elements}
   </React.Fragment>

Now to create the state object that conatined the elements I wanted to display I was using a funciton called by a useEffect hook. Basically when the server sent back data that I needed, I would tell the useEffect hook to run a function called createElements

const createElements = (data) => {
    const elements = Object.keys(data).map( item => return(
       <ul>
           {subFunction1(item)}
       </ul>

     subFunction1(item){
        item.contacts.map( name => {
            reutrn <CustomCheckbox name={name} checked={selectedSendTo[name]}
        })
     }
    saveElementsToState(elements);
}

As you can see we basically have a function that runs 1 time (on server response) that triggers a function that creates the array of elements that we want to display which has its own nested subfunction that includes the child component that we are asking to watch a different state object to know whether it should be checked or not.

So What I did was simplify things, I turned {Object_1} into it's own functional component, lets call it <Object1 />. Inside the component instead of calling a function I just put the function code in there to loop through and return the elements (no longer saving elements to state) and lastly I no longer needed the useEffect since just updating the state object with the data once it gets it from the server would cause my subcomponent to re-render and create the elements. Inside the sub-component I simply return null if the data in state is null.

That fixed all my problems.

so now it looks something like this:

const Object1 = () => {
   if(!data)return null;

   return(
     Object.keys(data).map( item => return(
           <ul>
               {subFunction1(item)}
           </ul>

         subFunction1(item){
            item.contacts.map( name => {
                reutrn <CustomCheckbox name={name} checked={selectedSendTo[name]}
            })
         }
   )
}


return(
   <div>
     <Object1 /> //This is what contains/creates the elements now
   </div>
)