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

Question

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://i.sstatic.net/fugWg.jpg
On clicking https://i.sstatic.net/AmOEU.jpg

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;
  }

Answer 1

a {
    -webkit-tap-highlight-color: transparent;
}

Note: you can make this match your website's main color. For example - #591784

-webkit-tap-highlight-color: #591784;