How to remove outline border from a Material IconButton when clicked with styled Components

Question

I used a material iconButton but don't want the outline border that appears when the button is clicked. I tried everything but nothing seems to work. Is it possible to do it with styled components?

Check the following image.

Image

My code is here:

Code

import React from "react";
import { Paper, Grid, Typography } from "@material-ui/core";
import styled from "styled-components";
import IconButton from "@material-ui/core/IconButton";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import EditIcon from "@material-ui/icons/Edit";

const StyledContainer = styled.div`
  width: 90%;
  text-align: left;
  padding: 10px 16px;
`;

const DataContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const InfoContainer = styled.div`
  display: flex;
  align-items: center;
`;

const EditButton = styled(IconButton)`
  outline: none;
  border: none;
`;

function DocItem({ title, author }) {
  return (
    <StyledContainer>
      <Grid item xs={12}>
        <Paper elevation={3} style={{ padding: "10px 16px" }}>
          <DataContainer>
            <InfoContainer>
              <CheckCircleIcon
                style={{ width: "64px", height: "64px", marginRight: "22px" }}
              />
              <div>
                <h3>{title}</h3>
                <h4>{author}</h4>
              </div>
            </InfoContainer>
            <EditButton>
              <EditIcon />
            </EditButton>
          </DataContainer>
        </Paper>
      </Grid>
    </StyledContainer>
  );
}

export default DocItem;