How to place image inside of a parent div properly

Question

I have a div like this:

<div class="p-5 mb-3 mainInfo">
           <div class="circle"><img src="https://nanoclub.ir/images/cut.png"></div>
</div>

And result goes like this:

However, it should be showing inside the div like this:

And here is the CSS:

    .mainInfo{
        background-color: #fff;
        border: .01rem round #e0e1ed;
        border-radius: 20px;
        color: #585CA1;
        height:50px;
    }
    .circle {
        position:absolute;
        width:150px;
        height:170px;
        border-radius:50%;
        background:#fff;
        right:100px;
        top:40%;
        transform:translateY(-50%);
    }

So how can I place the image inside circle div properly like the expected image?