Autocomplete not working with NextJS app directory

[Gustavo-Contreiras-Hotels-at-Home]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: don't have

Steps:

1. follow official example using Chips

Current behavior 😯

I'm having the same problem this guy is having https://stackoverflow.com/questions/75818761/material-ui-autocomplete-warning-a-props-object-containing-a-key-prop-is-be

Expected behavior 🤔

It should work the same way it was working using pages directory

Context 🔦

It's not working

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.8
    @mui/core-downloads-tracker:  5.14.2
    @mui/icons-material: ^5.14.1 => 5.14.1
    @mui/material: ^5.14.2 => 5.14.2
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/styled-engine-sc: ^5.12.0 => 5.12.0
    @mui/system:  5.14.1
    @mui/types:  7.2.4
    @mui/utils:  5.14.1
    @mui/x-data-grid: ^6.10.2 => 6.10.2
    @types/react: 18.2.17 => 18.2.17
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: ^5.3.11 => 5.3.11
    typescript: 5.1.6 => 5.1.6

[dev-rafiu]

I changed my file extentions from js to jsx and it worked. Not using TS though