How can I remove this css click effect on touch devices?

I'm currently working on the styles of this nav menu.
It works fine on browsers. As for phones, there is this weird blue onclick effect. How can I remove it?
Screen Shots:
Before clicking https://imgur.com/Ovu5v7P
On clicking https://imgur.com/lOwpicT

Heres my code:

React
import { Link, NavLink } from "react-router-dom";//these are just <a>

<div className="drawerNav" onClick={() => setDrawerOpen(false)}>
            <a className="closebtn">Close</a>
            <div className="drawerNav-content">
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
              <Link to="/post">Post</Link>
              <a onClick={handleAuth}>{signed ? "Logout" : "Login"}</a>
            </div>
</div>
CSS(styled components)
.drawerNav {
    a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #fff;
      display: block;
    }
  }
  .drawerNav-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }