'update react state based on programmatic DOM changes

I have a functional react component with several controlled inputs. I want to update the state of this component when these inputs are manipulated directly through the DOM.

So for example I have this checkbox:

<input 
  type="checkbox"
  name="checkbox"
  className="delete-checkbox"
  checked={isChecked} 
  onChange={event => setShouldDelete(sku, setIsChecked, event)
/>

where setShouldDelete is called whenever the checkbox is clicked. I would like to call it as well when something like this is executed:

checkbox.checked = true;

I understand that this is against the react idealogy of having a "single source of truth" but my code is being executed in a programmatic context (an automatic tester) and it's throwing my logic off in all sorts of ways.

Am I missing an obvious answer or how would I go about doing this? (using react hooks preferably)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source