Как объединить маски SVG?

Я пытаюсь «объединить» две маски в SVG и применить их таким образом, чтобы белая часть обеих масок была видна в форме, к которой я ее применяю.

Я читал, что решение может быть feComposite, но не могу заставить его работать... Вот что у меня есть:

<svg width = "200" height = "200" xmlns = "http://www.w3.org/2000/svg">
  <defs>
    <mask id = "mask1" x = "0" y = "0" width = "200" height = "200">
      <rect x = "0" y = "0" width = "200" height = "200" fill = "black"/>
      <rect x = "0" y = "0" width = "100" height = "100" fill = "white"/>
    </mask>
    <mask id = "mask2" x = "0" y = "0" width = "200" height = "200">
      <rect x = "0" y = "0" width = "200" height = "200" fill = "black"/>
      <rect x = "100" y = "100" width = "100" height = "100" fill = "white"/>
    </mask>
    <filter id = "combinedMask">
            <feComposite in = "mask1" in2 = "mask2" operator = "over"/>
    </filter>
  </defs>
  
  <rect x = "0" y = "0" width = "200" height = "200" fill = "red" mask = "url(#combinedMask)"/>
</svg

Желаемый результат в приведенном выше случае будет таким: выход