The button appears to be overlapped when clicked

here is my python script along with kv file at the end

from kivymd.app import MDAppfrom kivy.uix.screenmanager import ScreenManager, Screenfrom kivy.lang.builder import Builderclass Homepage(Screen):    def videobuttonclicked(self, button):        if button.icon == "play":            button.icon = "pause"        else:            button.icon = "play"class Main(MDApp):    def build(self):        Builder.load_file("main.kv")        sm = ScreenManager()        sm.add_widget(Homepage(name="homepage"))        return smif __name__ == "__main__":    Main().run()<Homepage>:    MDRelativeLayout:        id: controls        size_hint: 1, None        pos_hint: {"bottom":1}        md_bg_color: 0,0,0,0.3        height: video_button.height        MDIconButton:            id: video_button            icon: 'play'            pos_hint: {'center_x': .5, 'center_y': .5}            on_release: root.videobuttonclicked(self)

the button are getting overlaped on each when i click on it. how can i fix it?