ReactJs - How to add z-index effect for material-ui autocomplete dropdown?

In React application, using @material-ui for adding <Autocomplete>. Here I want to display dropdown behind the input field. So I am trying to add z-index for styles but its not working. Also I want to hide the scrollbar but not the scroll functionality.

<Autocomplete
          id="nba teams"
          options={list}
          disableClearable
          renderInput={(params) => (
            <TextField
              classes={{ root: styles.input }}
              {...params}
              InputProps={{
                ...params.InputProps,
                disableUnderline: true,
              }}
              placeholder="Search for Creators"
            />
          )}
          PaperComponent={({ children }) => (
            <Paper
              style={{
                width: '280px',
                backgroundColor: '#f4f7f8',
                marginLeft: '-20px',
                marginTop: '5px',
                position: 'absolute',
                zIndex: -1,
              }}
            >
              {children}
            </Paper>
          )}
          freeSolo
          getOptionLabel={(data) => data.name}
          renderOption={(obj) => <Result data={obj} />}
          style={{ width: 280, border: 'none', position: 'relative', zIndex: 2 }}
          value={selectedTeam}
          classes={{ paper: styles.paper }}
          onChange={(_event, newTeam) => {
            window.location.href = `/`
            setSelectedTeam(newTeam)
          }}
        />

Please help me to solve these 2 issues.