Create new document doesn't work on documentList that is direct child of listItem

[jmorgadosoares]

I've created a basic document and the idea is to have a bunch of products with categories and subcategories. The structure goes Categories -> Sub Categories -> Products but I can't seem to create a new document using the create new button on the top right of the Categories column.

This is not specific to the Categories schema as changing to Sub Categories -> Categories -> Products behaves the same. All three schemas only have one field that is a string. All relevant code is bellow

// ./sanity.config.ts

import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'
import { visionTool } from '@sanity/vision'
import { schemaTypes } from './schemas'
import { myStructure } from './deskStructure'

export default defineConfig({
    name: 'default',
    title: '*****',
    projectId: '*****',
    dataset: 'production',
    plugins: [
        deskTool({
            structure: myStructure,
        }),
        visionTool()
    ],

    schema: {
        types: schemaTypes,
        templates: (prev) => {
            return [...prev]
        }
    },
})

// ./deskStructure.jsx

export const myStructure = async (S, context) => {
    return S.list()
        .title('Content')
        .items([
            S.listItem()
                .title('Products')
                .child(
                    S.documentList()
                        .title('Categories')  <-- create new doesn't work
                        .schemaType('category')
                        .filter('_type == "category"')
                        .child(
                            S.documentList()
                                .title('Sub-categories')  <-- create new works - creates a new sub category
                                .schemaType('sub-category')
                                .filter('_type == "sub-category"')
                                .child(
                                    S.documentList()
                                        .title('Products')  <-- create new works - creates a new product
                                        .schemaType('product')
                                        .filter('_type == "product"')
                                )
                        )
                ),
            S.divider(),
            ...S.documentTypeListItems(),  <-- create new works for all document types
            S.divider()
        ])
}

// ./schemas/index.ts

import product from './product'
import category from './category'
import subcategory from './sub-category'

export const schemaTypes = [category, subcategory, product]

// ./schemas/category.js & ./schemas/sub-category.js & ./schemas/product.js

export default {
    name: 'category/sub-category/product',
    title: 'Category/Sub-category/Product',
    type: 'category/sub-category/product',
    fields: [
        { name: 'title', type: 'string' }
    ]
}

// ./package.json
{
  "name": "*****",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/vision": "^3.12.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.12.1",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^2.0.1",
    "@types/react": "^18.0.25",
    "@types/styled-components": "^5.1.26",
    "eslint": "^8.6.0",
    "prettier": "^2.8.8",
    "typescript": "^4.9.5"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

Another weird behaviour: if I duplicate the first list - for example Categories -> Sub Categories -> Products -> Categories - the last one doesn't work either. It's like it just refreshes the desk view

Am I missing something or is this a bug?