// get the state from the hook
const { hideOutline } = useTabOutline();

// in one case this was used in a render like so:
<span
  className={classnames({
    highlighted,
    checkmark: true,
    'hide-outline': hideOutline,
  })}
/>

// with scss code like:
input:focus ~ :not(.hide-outline) {
  border-color: $color-white;
}