Having more than one <Defs /> tag in an <Svg /> doesn't work

[EvHaus]

Describe the bug

When rendering <Svg /> elements in react-pdf, if you have more than one <Defs /> component, only the children of the first one will be applied.

To Reproduce

const Test = () => (
  <Document>
    <Page>
      <Svg width="500" height="300" viewBox="0 0 500 300">
        {/* If you remove this <Defs /> component, the gradient below will work */}
        <Defs>
          <LinearGradient id="unused" x1="0" x2="0" y1="0" y2="1">
            <Stop offset="0" stopColor="red"></Stop>
            <Stop offset="1" stopColor="blue"></Stop>
          </LinearGradient>
        </Defs>
        <Defs>
          <LinearGradient id="shouldbeused" x1="0" x2="0" y1="0" y2="1">
            <Stop offset="0" stopColor="red"></Stop>
            <Stop offset="1" stopColor="blue"></Stop>
          </LinearGradient>
        </Defs>
        <Circle cx="10" cy="10" fill="url(#shouldbeused)" r="10" stroke="blue"></Circle>
      </Svg>
    </Page>
  </Document>
);

ReactPDF.render(<Test />);

https://react-pdf.org/repl?code=3187b0760ce02e00402a05368c0bc30050129503e0c0a061801e0044460057016c130a1d0a24801404301cc1479e78819401b871801dc025801328002c5002200ac001997c98321388e32a0280ccabd60f1094402110003c172987655dc36a7af6601bc03d002a18012400cc60013c412860009c11a84104106165c42049481003933cf141a8001dc0e8a000681334603822d9254de860008c10006c4144c5c41a1ac4402201ac61bd3c017df0012186c8d2215cdcf80065c4c010d82201c42aaa0a60a41528c128201125d4ac01196c8e0098ce434fe4d4432fe58fe4a7a6f9f8a04072604003d210f56eea6827c00c220268441451438e1889e77a7c5eaf12022be3f3f8029e30604e4c110852d41a940433ce1a8a45b8e1730592d56956a83098d3386a5d214a238cd94cd7b11a98b159ac199b4902820323083524f53d81c8e373b9581e7760bcbd4c10793dd994d477d7efb005dc7178ae94365b0f847c725ade0092dba8c428b146f049be484e26922d88ee7333c7cda60a0a5a9644d8320f1045800d78b006c8f3bb01828ebb804da0d6d8441ae8003118a2552840cb249875243e340a804440dd040128924f378723d18a593842f387b0b8ae164506841fc26000dcf87c0009516c0280b1480031001d144c09204045d0c44432132c3fc10000

If you remove the first <Defs /> component, the gradient in the circle will start to work. In HTML, this SVG works as expected.

Expected behavior

You should be able to reference the id of any <Defs /> inside the <Svg />, not just the first one.

Screenshots

Desktop (please complete the following information):

• OS: All
• Browser: Chrome
• React-pdf version: @react-pdf/renderer@4.1.5