Image not showing While Using React-Select Dropdown Select Option - reactjs

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