所以我有这个Select组件从MUI和它的工作正常，因为它是.从列表中选择一个项目后，路由器推到该位置：
这是密码：

export default function SelectLocation({
  countriesData,
  currentUrl,
  formColor,
}: any) {
  const router = useRouter();

  const handelChange = (e: any) => {
    router.push(e.target.value);
  };

  return (
    //@ts-ignore

    <StyledFormControl formColor={formColor}>
      <Select
        value={countriesData ? currentUrl : "loading"}
        id='server-select'
        onChange={handelChange}
      >
        {countriesData ? (
          countriesData.map((country: any) => {
            return (
              <MenuItem value={country?.attributes.Slug} key={country.id}>
                {country.attributes.Country} - {country.attributes.City}
              </MenuItem>
            );
          })
        ) : (
          <MenuItem value='loading'>Loading...</MenuItem>
        )}
      </Select>
      <FormHelperText>Select another server location</FormHelperText>
    </StyledFormControl>
  );
}

我想要的是添加两个导航按钮（上一个，下一个），相应地导航到列表中的下一个/上一个项目。

我很感激任何能让我找到解决办法的想法。