Property 'className' does not exist when using framer-motion with Preact

Question

Can anyone explain why I can't use className or onClick in framer-motion:

import { motion } from 'framer-motion';

export function App() {
    return <motion.div className="app">App</motion.div>;
}

So the error appears:

Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.
  Property 'className' does not exist on type 'IntrinsicAttributes & PropsWithoutRef<HTMLMotionProps<TagName>> & RefAttributes<unknown> & Readonly<...>'.ts(2322)
(property) className: string

Here is my package.json:

{
    "name": "preact",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "framer-motion": "^10.16.15",
        "preact": "^10.19.1",
        "react-hot-toast": "^2.4.1",
        "react-icons": "^4.12.0",
        "vite-plugin-svgr": "^4.2.0"
    },
    "devDependencies": {
        "@preact/preset-vite": "^2.6.0",
        "@types/node": "^20.9.3",
        "sass": "^1.69.5",
        "typescript": "^5.2.2",
        "vite": "^5.0.0"
    }
}

My tsconfig.json code:

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,
        "paths": {
            "react": ["./node_modules/preact/compat/"],
            "react-dom": ["./node_modules/preact/compat/"],
            "@/*": ["./src/*"]
        },

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "jsxImportSource": "preact",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }],
    "types": ["vite-plugin-svgr/client"]
}

Here is my code Error

I have reinstall framer-motion and install version 9 (based on tutorial on YouTube) instead of version 10, it still not working.