Image not showing While Using React-Select Dropdown Select Option

Question

I am trying to implement a select dropdown option with image by the left side of the text. I used react-select library but the image shows broken.

Here is my code:

import React from 'react'
import Select from 'react-select'
import { components } from 'react-select';
import { login } from "../customSelect/login.png";
const options = [
{
    label: 'Option 1',
    value: 0,
    image: "../customSelect/login.png",
},
{
    label: 'Option 2',
    value: 1,
    image: "../customSelect/login.png",
}
];
const customStyles = {
option: (provided) => ({
    ...provided,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
}),
singleValue: (provided) => ({
    ...provided,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
}),

}

const { SingleValue, Option } = components;

const IconSingleValue = (props) => (
<SingleValue {...props}>
    <img src={props.data.image} 
style={{ height: '30px', width: 
'30px', borderRadius: '50%', marginRight: '10px' }}/>
    {props.data.label}
</SingleValue>
);

const IconOption = (props) => (
<Option {...props}>
    <img src={props.data.image} 
    style={{ height: '30px', width: '30px', borderRadius: '50%', 
marginRight: '10px' }}/>
    {props.data.label}
</Option>
);
const SelectOption = () => {

return (
<div>
  <Select
    styles={customStyles}
    components={{SingleValue:IconSingleValue, 
Option:IconOption}}
    options={options}
   />
</div>
)
}

export default SelectOption

this is the result i got