Custom use effect comparator : ReactJS

Question

I am having a state variable that is defined as follows

  const [val, setVal] = useState({ notdone: [], done: [] })

where done has the following structure

[ { col: "val1", field: "val1", values: [1,2,3]}, { col: "val2", filed: "val2", values:[]  }

I want to run the useffect when some changes are made to the done and also values array under each object. In my case, useEffect gets triggered when I remove/add an objects to the done. But not when some changes happen inside values array of each object.

How can I have a watch on both the changes

useEffect(() => {
    callback();
 }, [val.done.length]);

It is achievable using use-deep-compare-effect, but is there a way to do this without using this external package?

Help would be appreciated