use custom icon in "react-rating" when fraction is greater that 1 - css

Question

I am using the react-rating package in my Nextjs application and I want to use a custom icon both for the emptySymbol and fullSymbol of the Rating component.
The problem is when the rating is a decimal value like 3.7, the custom icon does not show up correctly.
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<Image src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<Image src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
And the outcome is the picture below:
It seems that react-rating make the custom icon smaller instead of filling portion of it.
What I want to achieve is the same behavior as the default icons have: (below picture)

Answer 1

Thanks to #DBS 's comment which somehow led me to the answer.
I am also using tailwindcss in my project. so the style max-width: 100%; was being overridden by #tailwind base; which led to this incorrect display of the "half-filled star".
And also for this specific situation, i used HTML native tag instead of the Nextjs Image component.
The final solution was:
<div className="Custom-rating">
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<img src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<img src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
</div>
And global.css file:
.Custom-rating img {
max-width: none !important;
}