Estoy usando el html "seleccionar"

 const selectedvalue = "male" <select> <option className={selectedvalue == "male" ? "selectedoption" : } selected={selectedvalue == "male" ? "selected" : false} value={"male"}>male</option> <option className={selectedvalue == "female" ? "selectedoption" : false} selected={selectedvalue == "female" ? "selected" : false}value={"female"}>female</option> </select>

Código CSS:

 .selectedoption{ color: #DB1962; background-image: url("my base 64 code") } option:hover{ background-color: "#FFF" }

Estoy usando el color de fondo para la opción de desplazamiento, pero aún obtengo el color de fondo predeterminado al pasar el mouse.

Y en el valor selectedoption con la clase de opción seleccionada, puedo obtener el color, pero la imagen no puedo obtener. Quiero que se muestre el ícono de marca en la opción seleccionada.

Gracias de antemano.