coffee/components/sort/Sort.jsx

import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';

const Sort = ({ sort, handleSortChange }) => {
  return (
    <>
      <FormControl
        sx={{
          width: '200px',
          mb: { xs: '10px', sm: '0px' },
          mr: { sm: '10px' },
        }}
      >
        <InputLabel id="sort-label">Sort</InputLabel>
        <Select
          MenuProps={{
            disableScrollLock: true,
          }}
          label="Sort"
          labelId="sort-label"
          id="sort-select-helper"
          value={sort}
          onChange={handleSortChange}
        >
          <MenuItem value="asc">Name - A-Z</MenuItem>
          <MenuItem value="desc">Name - Z-A</MenuItem>
        </Select>
      </FormControl>
    </>
  );
};

export default Sort;