React styled-component button does not receive focus - reactjs

Question

React styled-component button does not receive focus
This is some code I inherited (see below). There are rows with a title and corresponding button (Bookmark). Using the tab button I can focus on the title. Upon another tab the focus moves to the styled button, but there is no focus ring. On the next tab the focus goes to the next title with a focus ring, and so on.
Why is the styled.button not receiving focus?
If the IconWrapper styled component (listed below) is replaced with <button></button> then the
icon receives focus and has a focus ring.
<button
ref={node => (this.removeBookmarkBtns[i] = node)}
aria-label="Remove bookmark"
onClick={() => {this.markForRemoval(bookmark, i);}}
>
<BookmarkIcon />
</button>
Inherited code
import styled from "styled-components";
<div>
... irrelevant stuff
<IconWrapper
ref={node => (this.removeBookmarkBtns[i] = node)}
aria-label="Remove bookmark"
onClick={() => {this.markForRemoval(bookmark, i);}}
>
<BookmarkIcon />
</IconWrapper>
... irrelevant stuff
</div>
The associated button styled-components
const IconWrapper = styled.button`
color: ${theme.colors.primary};
font-size: 2em;
cursor: pointer;
margin-left: 10px;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
outline: none;
`;
const BookmarkIcon = styled(Icons.BookmarkCheck)`
display: block;
overflow: visible;
`;
Icon.BookmarkCheck
Icons.BookmarkCheck = props => (
<SVG {...props}>
<path d="m256 512a254.4 ...
</SVG>
);

Answer 1

Have you tried adding tabIndex={0}?
<button
ref={node => (this.removeBookmarkBtns[i] = node)}
aria-label="Remove bookmark"
onClick={() => {this.markForRemoval(bookmark, i);}}
tabIndex={0}
/>

Answer 2

After a bit of rubber ducking it dawned on me that it isn't the styled-component causing the problem, but the CSS of the styled-component.
Remove outline: none and of course it works.