MUI Autocomplete with Vite: Element type is invalid: expected a string or a class/function but got: object

I have this code:

<Autocomplete
            multiple
            id="shifts"
            data-testid="shifts"
            getOptionLabel={(shift: ShiftBaseResponse) => `${shift.shiftCode}`}
            disableCloseOnSelect
            onChange={(event, selectedShifts) => {
              formik.setFieldValue("shifts", selectedShifts);
            }}
            defaultValue={formik.values.shifts}
            value={formik.values.shifts}
            options={shifts}
            renderInput={(params) => (
              <TextField
                {...params}
                id="shiftsInput"
                error={formik.touched.shifts && Boolean(formik.errors.shifts)}
                helperText={(formik.touched.shifts as ReactNode) && (formik.errors.shifts as ReactNode)}
                label={t("ProdCalendar.modal.shifts")}
              />
            )}
            isOptionEqualToValue={(option, value) => option.id === value.id && option.shiftCode === value.shiftCode}
          />
    

I updated our project to use Vite instead of CRE. It was working before, now, I get this error:

react-dom.development.js:28439 
 Uncaught 
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at createChild (react-dom.development.js:15109:28)
    at reconcileChildrenArray (react-dom.development.js:15404:25)
    at reconcileChildFibers2 (react-dom.development.js:15821:16)
    at reconcileChildren (react-dom.development.js:19167:28)

I am completely clueless. All the versions are the latest from MUI. The error messages give me 0 help. All I was able to find is that if I remove the {...params} from the textfield, it renders without any error.

        <Autocomplete
            multiple
            id="shifts"
            data-testid="shifts"
            getOptionLabel={(shift: ShiftBaseResponse) => `${shift.shiftCode}`}
            disableCloseOnSelect
            onChange={(event, selectedShifts) => {
              formik.setFieldValue("shifts", selectedShifts);
            }}
            defaultValue={formik.values.shifts}
            value={formik.values.shifts}
            options={shifts}
            renderInput={(params) => (
              <TextField

                id="shiftsInput"
                error={formik.touched.shifts && Boolean(formik.errors.shifts)}
                helperText={(formik.touched.shifts as ReactNode) && (formik.errors.shifts as ReactNode)}
                label={t("ProdCalendar.modal.shifts")}
              />
            )}
            isOptionEqualToValue={(option, value) => option.id === value.id && option.shiftCode === value.shiftCode}
          />

This renders the component, but it is empty, not responsive, and I get this error in the console:

MUI: Unable to find the input element. It was resolved to null while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.

Make sure you have customized the input component correctly. Error Component Stack:
    at Autocomplete2 (Autocomplete.js:413:17)
    at div (<anonymous>)
    at emotion-element-6a883da9.browser.esm.js:35:17

vite conf:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    mainFields: ["browser"],
  }
});

You need to remove the following line from your Vite configuration file.

 resolve: {
    mainFields: ["browser"],
  }

At least it should resolve the first console error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.