How to dynamically change image when view port is changed in react.js/Styled Component

Question

import { GlobalStyle } from \'../Theme\';
import styled from \'styled-components\';

import heroMobileImg from \'../assets/images/about/mobile/image-about-hero.jpg\';
im