[joy-ui][Input] Typescript "No overload matches this call" on preact

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/vitejs-vite-rew1hg?file=src%2Fmain.tsx

Steps:

1. Create a vite preact project from their default preact template
2. Install @mui/joy @emotion/react @emotion/styled
3. Create an Input component
4. Run a build with npm run build

Current behavior 😯

During a build TypeScript throws TS2769: No overload matches this call.

❯ npm run build 

> vite-preact-ts-starter@0.0.0 build
> tsc && vite build

src/app.tsx:15:10 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: React.ElementType; } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "autoComplete" | "autoFocus" | "onClick" | "onChange" | "onKeyDown" | "onKeyUp" | "onFocus" | ... 7 more ... | "id"> & { ...; } & InputSlotsAndSlotProps & Omit<...>): any', gave the following error.
    Type '{ required: true; autoFocus: true; }' is not assignable to type 'IntrinsicAttributes & { component: React.ElementType; } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "autoComplete" | "autoFocus" | "onClick" | ... 11 more ... | "id"> & { ...; } & InputSlotsAndSlotProps & Omit<...>'.
      Property 'component' is missing in type '{ required: true; autoFocus: true; }' but required in type '{ component: React.ElementType; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<InputTypeMap<{}, "div">>): any', gave the following error.
    Type '{ required: true; autoFocus: true; }' is not assignable to type 'IntrinsicAttributes & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "autoComplete" | "autoFocus" | "onClick" | "onChange" | "onKeyDown" | ... 9 more ... | "id"> & { ...; } & InputSlotsAndSlotProps & Omit<...>'.
      Type '{ required: true; autoFocus: true; }' is missing the following properties from type 'Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "autoComplete" | "autoFocus" | "onClick" | "onChange" | "onKeyDown" | "onKeyUp" | "onFocus" | "onBlur" | ... 6 more ... | "id">': disabled, autoComplete, onClick, onChange, and 11 more.

15         <Input required autoFocus />
            ~~~~~

  node_modules/@mui/types/index.d.ts:105:7
    105       component: C;
              ~~~~~~~~~
    'component' is declared here.


Found 1 error in src/app.tsx:15

Expected behavior 🤔

Project builds

Context 🔦

None- I need to be able to make an input component that builds with preact and vite

Your environment 🌎

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  Browsers:
    Chromium: 117.0.5938.92 (Official Build) (64-bit) 
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.17 
    @mui/core-downloads-tracker:  5.14.11 
    @mui/joy: ^5.0.0-beta.8 => 5.0.0-beta.8 
    @mui/private-theming:  5.14.11 
    @mui/styled-engine:  5.14.11 
    @mui/system:  5.14.11 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.11 
    react:  18.2.0 
    react-dom:  18.2.0 
    typescript: ^5.0.2 => 5.2.2

Reproduce the failure with the StackBlitz example and npm run build, then inspect src/app.tsx and the reported typings in node_modules/@mui/types/index.d.ts around line 105. Compare the Joy Input type behavior in the Preact setup; done means the project builds without TS2769 for .