SVG inside flex misaligned when wrapped in div

I want an SVG icon of unknown size center aligned to the left of some text. I preferably want to use flex.

This is the CSS for the SVG and text container:

.container {    background-color: pink;    display: flex;    align-items: center;    margin: 10px;    width: 200px;}

This works fine:

<div class="container"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><rect width="24" height="24"/></svg><div>ALIGNED ICON</div></div>

However, when I wrap the SVG in another div, the height of that div becomes unnecessarily big, resulting in a misalignment of the SVG and text:

<div class="container"><div><svg style="width:24px;height:24px" viewBox="0 0 24 24"><rect width="24" height="24"/></svg></div><div>MISALIGNED ICON</div></div>

Here is a link to CodePen

In reality, this is a React project and I use external SVG components that I don't have control over or know the size of. I can therefore not apply any styles directly to the SVG element, neither set the wrapper div height to match that of the SVG.

How do I align the SVG and text when wrapping the SVG in another div?