how to scroll when clicking in the selection menu TextField material ui?

Question

how to scroll when clicking in the selection menu TextField material ui?

I found an example, you can scroll there if you replace it with select and set it via MenuProps, but this option does not suit me. I need to make a scroll in the TextField.

https://codesandbox.io/s/epic-hill-bdhu22?file=/demo.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY1",
    label: "1"
  },
  {
    value: "JPY2",
    label: "2"
  },
  {
    value: "JPY3",
    label: "3"
  },
  {
    value: "JPY4",
    label: "4"
  },
  {
    value: "JPY",
    label: "¥"
  }
];

export default function SelectTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch", heigth: "10px" }
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>
    </Box>
  );
}

Answer 1

Do it like this:

<TextField
  id="outlined-select-currency"
  select
  label="Select"
  defaultValue="EUR"
  helperText="Please select your currency"
  SelectProps={{ MenuProps: { sx: { maxHeight: 150 } } }} // add this line
>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

Menu will automatically turn into scroll. (No need for any additional css)

Good Luck :)