Material ui自动完成endInputAdornment自定义元素未居中

import React from 'react';
import { Autocomplete, TextField } from '@mui/material';
import './App.css';

const App = () => {
  return (
    <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          InputProps={{
            endAdornment: (
              <div className="custom-adornment">
                🔍
              </div>
            ),
          }}
        />
      )}
    />
  );
};

export default App;

.custom-adornment {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

import React from 'react';
import { Autocomplete, TextField, makeStyles } from '@mui/material';

const useStyles = makeStyles({
  adornment: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
});

const App = () => {
  const classes = useStyles();

  return (
    <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          InputProps={{
            endAdornment: (
              <div className={classes.adornment}>
                🔍
              </div>
            ),
          }}
        />
      )}
    />
  );
};

export default App;