The arrow of my custom react MUI tooltip is not visible unless zoomed in

I am using the react mui library to create a tooltip for my application. I got the tooltip set up easy enough, but I am running into issues when I attempt to style it. I get the required style but I can not see the arrow of the tooltip unless I am zoomed in a considerable amount.

The styles

import Tooltip from '@material-ui/core/Tooltip';
import {withStyles} from "@material-ui/core"

const CustomTooltip = withStyles((theme) => ({
  tooltip: {
    backgroundColor: '#FFFFFF',
    color: '#1C2023',
    border: '2px solid #A7AFB3',
    fontSize: '10px',
    fontWeight: '600',
    lineHeight: '12px',
    textAlign: 'center',
    boxSizing: 'border-box',
    padding: '5px 14px 5px 20px',
    fontFamily: 'Open Sans',
  },
  arrow: {
    color: '#FFFFFF',
    '&::before': {
      border: '2px solid #A7AFB3'
    }
  }
}))(Tooltip)

export default CustomTooltip;