Typescript React compiler issue with children props

The Typescript compiler seems to be having an issue recognizing JSX child elements as the children prop. I am trying to use Typescript for Wordpress Gutenberg block development but am running into this odd issue.

Error

TS2769: No overload matches this call. The last overload gave the following error. Argument of type '{ title: string; }' is not assignable to parameter of type 'Attributes & Props'. Property 'children' is missing in type '{ title: string; }' but required in type 'Props'.

The error occurs on the edit.tsx file at <PanelBody title="Some Title">. For whatever reason the child element does not satisfy the children props for the PanelBody element. I can trick the compiler by adding children as a prop to get it to compile without errors:

<PanelBody children={null} ...>
  <p>Child</p>
</PanelBody>

But, VS Code gives me an error that says children is defined twice....rightly so. But the compiler doesn't understand this and only sees one children prop here. Any reason why that is?

edit.tsx

import { BlockEditProps } from "@wordpress/blocks";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, Panel } from "@wordpress/components";

import React from "react";
import { BlockAttributes } from "./metadata";

const TestBlock: React.FC<BlockEditProps<BlockAttributes>> = (props) => {
  return (
    <>
      <InspectorControls>
        <Panel>
          <PanelBody title="Some title">
            <p>Some child element</p>
          </PanelBody>
        </Panel>
      </InspectorControls>
      <div>
        <p>This is some content. Maybe it needs a child?</p>
      </div>
    </>
  );
};

export default TestBlock;

webpack.config.js

const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaultConfig,
    entry: "./src/editor/index.ts",
    module: {
        ...defaultConfig.module,
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            ...defaultConfig.module.rules,
        ],
    },

    resolve: {
        ...defaultConfig.resolve,
        extensions: [".tsx", ".ts", ".js", ".jsx"],
    },

    output: {
        ...defaultConfig.output,
        filename: "index.js",
        path: path.resolve(__dirname, "dist/editor"),
    },
};

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "jsx": "react",
        "module": "ESNext",
        "target": "ES6",
        "allowJs": true
    },
    "exclude": [
        "node_modules"
    ],
    "include": ["src"]
}

package.json

{
  "devDependencies": {
    "@types/react": "^17.0.39",
    "@types/wordpress__block-editor": "^6.0.5",
    "@types/wordpress__blocks": "^9.1.1",
    "@types/wordpress__components": "^19.3.0",
    "parcel": "^2.0.1",
    "prettier": "^2.5.1",
    "ts-loader": "^9.2.7",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "@wordpress/block-editor": "^8.2.0",
    "@wordpress/blocks": "^11.2.2",
    "@wordpress/scripts": "^22.1.0"
  }
}