Nested <li> tags causing hydration errors in Next.js

[artem-gusev-from-ownr]

Hello, this is basically a continuation of this issue

I have very simple, one-leveled list on the Hygraph content field. But when it comes to the RichEditor component there is always nested <li> inside.

Here is the screenshot of the content on Hygraph

And here how it's actually transformed when it passed down to RichText component.

    "children": [
      {
        "type": "paragraph",
        "children": [
          {
            "bold": true,
            "text": "OWNR lets you buy later at a rate that is better for you"
          }
        ]
      },
      {
        "type": "bulleted-list",
        "children": [
          {
            "type": "list-item",
            "children": [
              {
                "type": "list-item-child",
                "children": [
                  {
                    "type": "list-item",
                    "children": [
                      {
                        "type": "list-item-child",
                        "children": [
                          {
                            "text": "There are no broker fees with OWNR, so it doesn’t impact on your savings. "
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "list-item",
            "children": [
              {
                "type": "list-item-child",
                "children": [
                  {
                    "type": "list-item",
                    "children": [
                      {
                        "type": "list-item-child",
                        "children": [
                          {
                            "text": "You don’t have to pay a deposit either, meaning you can invest the money for later. "
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "list-item",
            "children": [
              {
                "type": "list-item-child",
                "children": [
                  {
                    "type": "list-item",
                    "children": [
                      {
                        "type": "list-item-child",
                        "children": [
                          {
                            "text": "OWNR puts 10% of the leasing rate towards your equity share. "
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "list-item",
            "children": [
              {
                "type": "list-item-child",
                "children": [
                  {
                    "type": "list-item",
                    "children": [
                      {
                        "type": "list-item-child",
                        "children": [
                          {
                            "text": "There’s no need for you to renovate, because OWNR takes care of it before you move in. "
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "text": ""
          }
        ]
      }
    ]
  }

As you can see, there is always list-item that is nested withing another list-item

I hope that it will help to identify the issue faster