html2canvas not rendering text above SVG when it is displayed on browser with z-index correctly set

Question

I am using an html2canvas to generate and save posters. I currently have a custom SVG object of opacity 1 and z-index:1. On top of it, I have both MaterialUI's Typography and the normal <h1> tags with z-index set to a higher value. When I download the image, however the text does not appear.

Surprisingly, when I set the opacity of the custom SVG object to 0.5, I can see the text that still exists. I believe this might be a case of the z-index not being applied correctly.

Do provide any advice! The code block is below. Poster

<Box
                sx={{
                    zIndex: 5,
                    justifyContent: "flex-start",
                    backgroundColor: "rgba(0, 0, 0, 0)",
                    width: "90%",
                    height: "35%",
                    padding: "1rem",
                    marginTop: "800px",
                    overflow: "hidden",
                }}
            >
                <h1 
                    >
                    {donationDetails.startDate}
                </h1>
                <Typography
                    color="white"
                    variant="h1"
                    gutterBottom
                    sx = {{zIndex: 5000}}
                    >
                    {donationDetails.startDate}
                </Typography>
                <Typography
                    color="white"
                    variant="h2"
                    gutterBottom
                    >
                    {donationDetails.name}
                </Typography>
                <Typography
                    color="white"
                    variant="h3"
                    gutterBottom
                    >
                    {donationDetails.location}
                </Typography>
                <Typography
                    color="white"
                    variant="h3"
                    gutterBottom
                    >
                    {donationDetails.donationItems}
                </Typography>

            </Box>
            <BasicOutline
                style={{
                    position: "absolute",
                    zIndex: 1,
                }}
            />

HandleDownload Code

    const handleDownload = () => {
        const box = document.getElementById('poster-box');
        if (!box) return;
        html2canvas(box)
            .then(canvas => {
                const dataURL = canvas.toDataURL();
                const link = document.createElement('a');
                link.href = dataURL;
                link.download = 'poster.png';
                link.click();
            });
    };

Answer 1

Solved it by adding position:relative following this link here

            <Box
                sx={{
                    justifyContent: "flex-start",
                    backgroundColor: "rgba(0, 0, 0, 0)",
                    width: "90%",
                    height: "35%",
                    padding: "1rem",
                    marginTop: "800px",
                    overflow: "hidden",
                    zIndex: "5000",
                    **position:"relative"**
                }}
            >