Как разместить `div` внутри SVG-элемента, без` div`, перекрывающего SVG?

Question

Пытаясь разместить элемент div внутри SVG, я попытался использовать foreignObject, но он все еще перекрывается (виден вне темного фона SVG).

Как я могу разместить или даже если можно разместить div без его наложения (выход за пределы черного элемента SVG)

Представьте, как это выглядит в настоящее время, большое и маленькое (foreignObject) красные коробки перекрываются.

import React from 'react'
import { css } from '@emotion/core'

const svg = css`
  position: absolute;
  width: 100vw;
  bottom: -10px;
  #Mountains1 {
    /* fill: blue; */
  }
  .test {
    position: absolute;
    opacity: 0.5;
    bottom: 0;
    left: 50px;
    width: 50vw;
    height: 400px;
    background-color: red;
  }
`

export default function App() {
  return (
    <div>
      <div css={svg}>
        <svg viewBox="0 0 1920 561.94">
          <path
            id="Mountains1"
            d="M-72.363,446.563l81.99-69.38,81.337,7.554L169.3,353.058l52.02,24.125,66.034-50.562,46.712,50.562,52.044-32.534,92.916,8.409,99.4-67,154.4,19.683L888.3,141.565,1029.73,286.059l91.069-9.705,77.791,68.295,72.613-58.59,65.681,76.33,54.455-17.74,68.713,32.534,66.986-32.534,45.378,32.534,58.343-14.794,43.217,29.547,47.539-14.753,126.122,87.039V703.5h-1920Z"
            transform="translate(72.363 -141.565)"
          />
          <foreignObject y="200" width="260" height="160">
            <div className="test">Tasdasdest</div>
          </foreignObject>
        </svg>
        <div className="test">Test</div>
      </div>
    </div>
  )
}