我希望它当文本字段是悬停，然后文本字段周围的一个边界。我不能设置边界hove。我是新的材料UI。请任何人帮助我？如何解决它？这是我的所有代码。

import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';

const Shipping = () => {
  const Border = styled(Box)(() => ({
    padding: '2',
    marginTop: '60px',
    select: {
        borderColor: 'red',
    },
  }));

  return (
    <Box>
      <Typography variant="h5">Shipping Information</Typography>

      <Border>
        <Typography variant="caption" display="block">
          Caeleb Dressel
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          +14097575013
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          caelebdressel@example.com
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          417 Wahignton Ave. Green cove Springg, Plorida 39495
        </Typography>
      </Border>
    </Box>
  );
};

export default Shipping;