JSX config not working properly, I keep getting children props error in all my components

{
    "compilerOptions": {
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        },
        "jsx": "react-jsx",
        "jsxImportSource": "react",
    },
    "composite": true,
    "include": ["src"],
    "files": [],
    "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
    ]
}

{
    "imports": {
        "@oak/oak": "jsr:@oak/oak@^17.1.4",
        "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1",
        "react": "npm:react"
    },
    "nodeModulesDir": "auto",
    "compilerOptions": {
      "lib": [
        "ES2020",
        "DOM",
        "DOM.Iterable",
        "esnext"
      ],
      "jsx": "react-jsx",
      "jsxImportSource": "react",
      "jsxFactory": "React.createElement",
      "jsxFragmentFactory": "React.Fragment"
    },
    "unstable": [
      "sloppy-imports"
    ],
    "lint": {
        "rules": {
            "include": [
                "ban-ts-comment",
                "no-irregular-whitespace",
                "jsx-no-children-prop"
            ]
        }
    },
    "fmt": {
        "indentWidth": 4,
        "singleQuote": true
    }
}