I have a server component that passes string to an Iframe with onLoad bind, I am trying to make the iframe
content fit the screen with no scrollbars and so on. The problem is that the onLoad never fires
Server component

 <div
                className="flex flex-col items-center justify-center min-h-[84vh] sm:min-h-[89vh] bg-gray-50 dark:bg-gray-900">
                <Card className="w-full h-screen">
                    <CardHeader className={"flex flex-row justify-between"}>
                        <div>
                            <CardTitle>Export preview</CardTitle>
                        </div>
                        <ExportButton></ExportButton>
                    </CardHeader>
                    <CardContent className="m-0 my-1 pt-0 p-0 w-full h-screen flex justify-center border-2 box-border">
                        <FrameTemplate template={template}/>
                        {/*<iframe srcDoc={template} style={{overflow:"hidden !important", overflowClipMargin:"border-box"}}*/}
                        {/*        className={"w-full h-screen border-0 box-content"}/>*/}
                    </CardContent>
                </Card>
            </div>

Client component

export function FrameTemplate({template}: { template: string }) {
    return (
        <iframe srcDoc={template}
                width="100%"
                className={"block h-screen border-0"}
                onLoad={(event: SyntheticEvent<HTMLIFrameElement, Event>) => {
                    // Not working
                    console.log("fired");
                    event.currentTarget.style.height = event.currentTarget.contentWindow!.document.body.scrollHeight + "px"
                }}/>
    )
}