Aligning multiple SVG to surround elements

Question

Hello, I'm having issues with styling multiple SVGs that cut through contents in a way so that they align properly even on window resize.

This is the result I want. It's one single SVG that wraps between two elements.

Here is my attempt at it using FlexBox

As shown above, I divided each path into their own SVG component (SvgIn, SvgMid, SvgOut)
so SvgIn and SvgOut may stretch vertically along with their adjacent element.

<div
  style={{
    width: "100%",
    height: "100%",
    backgroundColor: "#A0A0A0",
    margin: "50px"
  }}
>
  <section style={{ display: "flex", flexDirection: "row" }}>
    <SvgIn style={{ height: "100%", alignSelf: "flex-start" }} />
    <ContentOne
      style={{
        margin: "auto",
        width: "100px",
        height: "250px",
        backgroundColor: "red"
      }}
    />
  </section>

  <SvgMid style={{ alignSelf: "center", width: "100%", height: "auto" }} />

  <section style={{ display: "flex", flexDirection: "row" }}>
    <ContentTwo
      style={{
        margin: "auto",
        width: "300px",
        height: "150px",
        backgroundColor: "blue"
      }}
    />
    <SvgOut style={{ alignSelf: "flex-end", height: "auto" }} />
  </section>
</div>

The result isn't great

• The width of SvgIn and SvgOut aren't responsive unlike SvgMid where it's always 100% width of the parent, so it looks broken.
• Despite 100% height, SvgIn and SvgOut does not stretch fully to fill the their own section container. (Turning preserveAspectRatio off does work but is there another way)
• If possible, can this be achieved without extract each path in the svg but manipulate the paths directly.

The SVG components and full snippet is in this CodeSandbox

Thank you for helping out this confused beginner.