Non-interactable Elements in Iframe

Question

I'm trying to interact with particular elements in Appsmith within an iframe but for some reason, they don't seem to respond when I do so. The iframe itself links to another page and the images have an onClick event tied to them. Clicking them does not give the output I desire, however. It should change the URL of the iframe to a different page.

Here's the function for the onClick() for the Plane buttons.

export default {
    url: "https://www.example.com",
    displayInfrastructure () {
        // return Display.src = 'https://app.appsmith.com/app/unoplat-panel/infrastructure-648aedfbe923f357ae1e8bcd';
        this.url = "https://app.appsmith.com/app/unoplat-panel/infrastructure-648aedfbe923f357ae1e8bcd";

    },
    displayNetwork () {
        this.url = "https://app.appsmith.com/app/unoplat-panel/network-648b33615cf6d35b42fa58e8";
    },
    displayMonitoring () {
        this.url = "https://app.appsmith.com/app/unoplat-panel/monitoring-648b3368c29598172ac6ee50";
    },
    displayDeveloper () {
        this.url = "https://app.appsmith.com/app/unoplat-panel/developer-648b336be923f357ae1e8ee3";
    }
}

Here's the one for the icons.

export default {
    url: "https://www.example.com",
    exampleIcon () {
        this.url = "https://app.appsmith.com/app/unoplat-panel/infrastructure-648aedfbe923f357ae1e8bcd";
    },
    async myFun2 () {
        //  use async-await or promises
        //  await storeValue('varName', 'hello world')
    }
}

Do iframes in Appsmith not allow you to interact with clickable images for some reason? Because it works fine and leads to a different link the moment I click on it within the actual page but not from the iframe.