Kivy CheckBox Activate Outside Designated Area

I have been playing around with this post's code in changing the background image of the CheckBox inorder to ultimately change the boarder/padding - found another post, but seems that there has not been an update(?). Aside from that, I've noticed that when I create a CheckBox, the "area" that has been designated to hold the CheckBox can be used to activate/deactive the CheckBox (see image below).

from kivy.config import Config
Config.set('graphics', 'multisamples', '0')
from kivy.app import App
from kivy.lang import Builder

sm = Builder.load_file('main.kv')


class TestApp(App):
    def build(self):
        return sm
        

if __name__ == '__main__':
    
    TestApp().run()

Screen:  

    BoxLayout:
        size_hint_y: None
        orientation: 'horizontal'       
        Button:
            text: 'Go back'

        CheckBox:
            size_hint_x: None
            width: 60           
            canvas.before:
                Rectangle:
                    source: 'white.png'
                    size: sp(22), sp(22)
                    pos: int(self.center_x - sp(11)), int(self.center_y - sp(11))

All of the area shown in red can be clicked on to activate the button. Why is that? And, how do I limit the activation/deactivation specifically to the actual CheckBox?