Expected behavior

I want to set the rating component to readonly after the Ajax request to handle the rating on the server was successful. But whatever I try, the rating can still be changed afterwards while a mouse over. I can hover over all five stars and they still change. Also the request can be sent again and again and again.

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/docs/standard/components/rating/

This is the HTML:

<ul class="rating" id="photo-rating" data-mdb-toggle="rating">
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
    <li><i class="far fa-star fa-sm text-primary"></i></li>
</ul>

And this is the part when the Ajax Request was successful. The Ajax Request itself works.

let ratingElement = document.querySelector('#photo-rating');
let ratingInstance = new mdb.Rating(ratingElement);
ratingInstance.readonly = true;
ratingElement.setAttribute('data-mdb-readonly', 'true');

Please advise how to fix this.