can't click button in bootstrap-dropdown with selenium - selenium

Question

I'm building a python script to automate the process of uploading beats to Beatstars (since they haven't made an api yet) but I'm running into an issue with the bs-dropdowns on Beatstars studio.
All other things work fine using selenium; I can create a new track, upload the wav, mp3, and stems, but I get stuck when trying to upload a picture for the beat because of this dropdown issue. Below I've shown the issue while trying to edit an already existing track but the concept still the same.
Here's what's happening. I open the dropdown by clicking this button here:
<button
ngcontent-uvy-c103=""
bssquarebuttonfocus=""
type="button"
class="action-element primary ng-star-inserted"
>
<i _ngcontent-uvy-c309="" class="icon-ellipsis ng-star-inserted"></i
><!---->
</button>
And here's the dropdown:
<div class="mat-menu-content ng-tns-c89-57">
<studio-option-edit
_ngcontent-uvy-c309=""
_nghost-uvy-c303=""
class="ng-tns-c89-57 ng-star-inserted"
style=""
><bs-external-action-option
_ngcontent-uvy-c303=""
label="Edit"
iconname="edit-o"
_nghost-uvy-c135=""
><button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-edit-o ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Edit</span>
<div
matripple=""
class="mat-ripple mat-menu-ripple"
></div></button></bs-external-action-option></studio-option-edit
><studio-option-share-inventory
_ngcontent-uvy-c309=""
_nghost-uvy-c305=""
class="ng-tns-c89-57 ng-star-inserted"
style=""
><bs-external-action-option
_ngcontent-uvy-c305=""
iconname="share-o"
_nghost-uvy-c135=""
><button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-share-o ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Share</span>
<div
matripple=""
class="mat-ripple mat-menu-ripple"
></div></button></bs-external-action-option></studio-option-share-inventory
><!----><studio-option-download
_ngcontent-uvy-c309=""
_nghost-uvy-c308=""
class="ng-tns-c89-57 ng-star-inserted"
style=""
><bs-external-action-option
_ngcontent-uvy-c308=""
label="Download"
iconname="download"
_nghost-uvy-c135=""
><button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-download ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Download</span>
<div
matripple=""
class="mat-ripple mat-menu-ripple"
></div></button></bs-external-action-option></studio-option-download
><!----><bs-external-action-option
_ngcontent-uvy-c309=""
_nghost-uvy-c135=""
class="ng-tns-c89-57 ng-star-inserted"
style=""
><button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-featured ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Feature</span>
<div
matripple=""
class="mat-ripple mat-menu-ripple"
></div></button></bs-external-action-option
><!----><studio-option-delete-inventory
_ngcontent-uvy-c309=""
label="Track"
_nghost-uvy-c292=""
class="ng-tns-c89-57 ng-star-inserted"
style=""
><bs-external-action-option
_ngcontent-uvy-c292=""
label="Delete"
iconname="delete-o"
_nghost-uvy-c135=""
><button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-delete-o ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Delete</span>
<div
matripple=""
class="mat-ripple mat-menu-ripple"
></div></button></bs-external-action-option></studio-option-delete-inventory
><!---->
</div>
The specific button I want to click is the first one:
<button
_ngcontent-uvy-c135=""
mat-menu-item=""
class="mat-focus-indicator option-action-mat-menu mat-menu-item"
role="menuitem"
tabindex="0"
aria-disabled="false"
>
<i _ngcontent-uvy-c135="" class="icon-edit-o ng-star-inserted"></i
><!----><span _ngcontent-uvy-c135="">Edit</span>
<div matripple="" class="mat-ripple mat-menu-ripple"></div>
</button>
And, finally, here's my short script:
wait.until(EC.element_to_be_clickable((By.XPATH, '/html/body/studio-root/div/ng-component/studio-tabs/ng-component/studio-page-container/div/studio-inventory-list-holder/studio-container-grid/div[1]/studio-media-card/div/div[4]/studio-button-item-menu/bs-menu-more-options/div/bs-square-button/button'))).click()
wait.until(EC.presence_of_element_located((By.XPATH, '//*[#id="mat-menu-panel-52"]/div/studio-option-edit'))).click()
Since there's no error I'm not sure what I'm doing wrong. I've tried different selectors, but still I get no error and my script keeps running.