Attribute selectors in emotion - emotion

Question

The following code customizes the google maps DrawingManager crosshair cursor. It works but I would like to be able to pass an svg cursor as a prop. I was trying to get it working using emotion but couldn't find anything similar in the emotion docs and my attempts failed. Can it be done in emotion?
Code: There are really only two relevant lines here (indicated) - the rest is given for context.
import React, { useEffect, useContext } from 'react'
import { GoogleMapContext, MapBox } from '#googlemap-react/core'
import ThemeSwitcher from './theme-switcher'
import styles from './styles/styles'
import './map.css' <--------------------------------------------------
export default function Map(props) {
const { state: { map } } = useContext(GoogleMapContext);
useEffect(() => map && map.setOptions({ draggableCursor: props.cursor }));
return <>
<MapBox
className='crosshair-cursor' <---------------------
apiKey={process.env.REACT_APP_GMAPS}
opts={{
center: { lat: -37.815018, lng: 144.946014 },
zoom: 11,
styles: styles[localStorage.getItem('mapTheme')],
}}
useDrawing
useGeometry
useGoogleApi
onClick={props.onClick}
onRightClick={props.onRightClick}
LoadingComponent={null}
/>
<ThemeSwitcher bindingPosition='TOP_LEFT' map={map} />
{props.children}
</>
}
map.css:
.crosshair-cursor [style*='crosshair'] {
cursor: url("https://i.stack.imgur.com/mA4e2.jpg?s=48&g=1")24 24, crosshair !important;
}
My attempt:
import React, { useEffect, useContext } from 'react'
import { GoogleMapContext, MapBox } from '#googlemap-react/core'
import ThemeSwitcher from './theme-switcher'
import styles from './styles/styles'
import './map.css'
import {css} from '#emotion/core'
const cursor = css`[style*='crosshair'] {
cursor: url("https://i.stack.imgur.com/mA4e2.jpg?s=48&g=1")24 24, crosshair !important;
}`
export default function Map(props) {
const { state: { map } } = useContext(GoogleMapContext);
useEffect(() => map && map.setOptions({ draggableCursor: props.cursor }));
return <>
<MapBox
// className='crosshair-cursor'
css={cursor}
apiKey={process.env.REACT_APP_GMAPS}
opts={{
center: { lat: -37.815018, lng: 144.946014 },
zoom: 11,
styles: styles[localStorage.getItem('mapTheme')],
}}
useDrawing
useGeometry
useGoogleApi
onClick={props.onClick}
onRightClick={props.onRightClick}
LoadingComponent={null}
/>
<ThemeSwitcher bindingPosition='TOP_LEFT' map={map} />
{props.children}
</>
}