Divergência na tipagem

No meu projeto o children do componente Button funcionou com

interface ButtonProps {
  children: React.ReactNode;
}

Quando coloco da forma que está no vídeo da aula dá erro na chamada do Button.

interface ButtonProps {
  children: ReactElement; 
}

'Button' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'ReactElement<any, string | JSXElementConstructor>'.ts(2747) index.tsx(4, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & ButtonProps'

Estou usando Vite com as seguintes versões no package.json e tsconfig.json respectivamente:

{
  "name": "alura-organo",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Acredito que o erro aconteça por conta das tecnologias e versões usadas. Ou não?