Untitled

return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 2,
        width: "100%",
        padding: "10px",
      }}
    >
      <Autocomplete
        freeSolo
        clearOnBlur
        sx={{ width: "100%" }}
        open={open}
        onInputChange={handleOpen}
        onClose={handleClose}
        filterOptions={(x) => x}
        getOptionLabel={(option) => {
          return `${option.label}` || "Unknown";
        }}
        renderOption={(props, option) => (
          <li {...props} key={option.identity}>
            {selectedCategory === "spot" && option.label}
            {selectedCategory === "movie" && option.label}
            {selectedCategory === "city" && option.label}
          </li>
        )}
        options={searchProposals}
        loading={proposalsLoading}
        onChange={(event, value) => onClick(event, value)}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Search and discover iconic movie locations.."
            slotProps={{
              input: {
                ...params.InputProps,
                startAdornment: (
                  <AsyncSearchCategory
                    setSelectedCategory={setSelectedCategory}
                  />
                ),
                endAdornment: (
                  <React.Fragment>
                    {proposalsLoading ? (
                      <CircularProgress color="inherit" size={20} />
                    ) : null}
                    {params.InputProps.endAdornment}
                    <SearchIcon
                      style={{
                        fontSize: 30,
                        color: "gray",
                        paddingRight: "5px",
                      }}
                    />
                  </React.Fragment>
                ),
              },
            }}
          />
        )}
      />
    </Box>
  );