How to use :active or :focus styles in react?

I have an image gallery where I want to select image and style selected one with green border. :hover works fine but :focus and :active are not applying to my img element. As soon as move mouse from the image my green borde goes away, but I want it to stay on selected image

Styles:

 image: {

    '&:hover': {
        border: '1px solid green'
   },
   '&:active': {
        border: '1px solid green'
   },
   '&:focus': {
        border: '1px solid green'
   },

Image that comes from map(Array…)

 <img
      className={classes.image}
      alt='My image'
      src={img}
      onDoubleClick={() => this.openImage}
 />

>Solution :

You can modify your img element to be able to receive focus by adding the tabindex (tabIndex in React) property. A tabindex of -1 lets you focus an element using the mouse, though not using the tab key.

<img
  className={classes.image}
  alt='My image'
  src={img}
  onDoubleClick={() => this.openImage}
  tabIndex={-1}
/>