SVG as pseudo background image in React Material UI - css

Question

I use the React Material UI with JSS. I have the following structure:
<footer>
<div className={classes.ContainerWrapper}>
<div className={classes.Container}>
<div>
<div className={classes.Text}>Text</div>
</div>
<Box marginLeft={6} className={classes.ButtonContainer}>
<Button className={classes.Button} variant="contained">
<Link to={...}>Link text</Link>
</Button>
</Box>
</div>
</div>
</footer>
The problem is that I want an SVG absolutely positioned compared to ContainerWrapper, partly behind the Container. My trials till now were:
Using z-index (did not work because of the absolute position)
Using negative z-index (did not work because the whole footer cannot have negative z-index, it has clickable elements)
Putting SVG in the :after pseudo element as a background image.
When I tried the last one, I run into the following obstacles:
This import throws an error:
import image from '../../assets/images/image.svg'; It works perfectly with png, btw.
Finally, I tried to use inline SVG as follows:
backgroundImage: `url("data:image/svg+xml,%3Csvg...")`
The after pseudo part appears in the DOM in the proper size. However, I cannot see the image.
Thanks in advance!