Rating is loading 10 stars on refresh then quickly returning to 5 stars

[ZalwayJH]

                 <Rating
                     iconsCount={5}
                     size={25}
                     ratingValue={0}
                     transition
                     allowFraction
                     readonly
                     initialValue={element}
                     fillColor="#D32748"
                   />

element is a tempory value just to see it working but it ranges from anywhere between 1 and 4, but it always loads as 5 out of 10 stars no matter what for a split second which messes up the layout with the increased height then quickly fixes itself. Any ideas what im doing wrong?

[digvijaySinghTntra]

Did you find any solution? I am facing the same issue.

[briancaow]

Im also facing the same issue

[YuriyYM]

Try to add your custom class with "display:none" property to fillClassName property of the Rating component.
It works for me

[chmcphoy]

Possibly a hydration issue, try seeing if it works on incognito - did for me.

If it works, upgrading to React 18.3.x or a framework specific solution could help, e.g this.

[james-deee]

@YuriyYM that did not work for me. Here's what i have

            <Rating
              allowFraction={true}
              readonly={true}
              initialValue={book.overall_rating}
              size={20}
              SVGclassName={"inline-block"}
              fillClassName="display:none"
            />

[shroommm]

I tried display: none with taillwindcss class (hidden) in fillClassName and it works.