React FontAwesome onClick() doesn't work as expected

1

I am attempting to use Font Awesome with my react app. I have added the required dependencies and imported them. The icons show up, unfortunately, when I click the icon directly, nothing happens. But when I click around it, I get the desired effect. Does anyone know why this happens, and how to fix it?

import { faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon 
    id="break-decrement"
    className="app__breakLength--downBtn manageBtn"
    onClick={props.onClick}
    icon={faArrowDown}/>

I haven’t been able to find the answer anywhere, so I’m guessing it’s something stupid simple that I’m missing.

Thanks, - Eric

3

I’ve copied this code and can’t recreate the problem, I replaced onClick with a console.log and it works when i click the icon directly. Can you post some more of your code?