Every time I try and select a rating the MUI dialog refreshes and resets the rating

Question

I have an MUI dialog which which allows you to rate a movie. But every time you try and select a rating it refreshes and resets the rating selected.

The RateWatchMovieDialog is supposed to bring up MUI rating component which allows you rate a specified movie using MUI rating component, then when you press the save button it will save your rating for that movie that movie to your watched list.

RateWatchMoveDialog.js

import React, { useState, useEffect, useContext } from "react";
import "../../styling/components/MovieWatchRateDialog.css";
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Rating,
    Stack,
} from "@mui/material";
import ThemeButton from "../core/ThemeButton";
import AuthContext from "../../components/helper/AuthContext";

function MovieWatchRateDialog(props) {
    let { user, authTokens } = useContext(AuthContext);
    const [score, setScore] = useState(0);
    const [rating, setRating] = useState({
        user: user.user_id,
        movie: 0,
        score: null,
    });

    let movie = props.movie;
    let movieTitle = movie.title;

    let getRating = async (id) => {
        let response = await fetch("http://127.0.0.1:8000/get_rating/" + id + "/", {
            method: "GET",
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
                Authorization: "Bearer " + String(authTokens.access),
            },
        });
        let data = await response.json();
        if (response.status === 200) {
            setRating(data);
            setScore(data.score);
        }
    };

    useEffect(() => {
        if (props.isOpen) {
            getRating(movie.id);
        }
    }, []);

    const handleClose = () => {
        addToWatchedList(movie.id);
        props.onClose();
    };

    const handleRateMovie = () => {
        if (rating.score) {
            editRating(movie.id, score);
        } else {
            addRating(movie.id, score);
        }
        handleClose();
    };

    let addRating = async (id, ratingScore) => {
        let response1 = await fetch(
            "http://127.0.0.1:8000/add_rating/" + id + "/",
            {
                method: "POST",
                body: JSON.stringify({
                    user: user.user_id,
                    movie: id,
                    score: ratingScore,
                }),
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                    Authorization: "Bearer " + String(authTokens.access),
                },
            }
        );
        let data1 = await response1.json();
        if (response1.status === 200) {
            setRating(data1);
        }
    };

    let editRating = async (id, ratingScore) => {
        let response = await fetch(
            "http://127.0.0.1:8000/edit_rating/" + id + "/",
            {
                method: "PUT",
                body: JSON.stringify({
                    user: user.user_id,
                    movie: id,
                    score: ratingScore,
                }),
                headers: {
                    "Content-type": "application/json; charset=UTF-8",
                    Authorization: "Bearer " + String(authTokens.access),
                },
            }
        );
        let data = await response.json();
        if (response.status === 200) {
            setRating(data);
        }
    };

    

    let addToWatchedList = async (id) => {
        let response = await fetch(
            "http://127.0.0.1:8000/add_watched_movie/" + id + "/",
            {
                method: "POST",
                body: JSON.stringify({ movie: id, user: user.user_id }),
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + authTokens.access,
                },
            }
        );
        await response.json();
    };

    return (
        <Dialog
            open={props.isOpen}
            onClose={handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <DialogTitle id="alert-dialog-title">
                <h4>
                    add rating
                    <h4--emphasise>.</h4--emphasise>
                </h4>
            </DialogTitle>

            <DialogContent>
                <DialogContentText id="alert-dialog-description">
                    <h6 className={"dialog-content"}>
                        marked as watched, how was{" "}
                        <span className={"dialog-content-emphasise"}>{movieTitle}</span>?
                    </h6>
                </DialogContentText>

                <Stack spacing={2} padding={2} alignItems={"center"}>
                    <Rating
                        name="simple-controlled"
                        controlled
                        precision={0.5}
                        size={"large"}
                        value={score}
                        onChange={(event, newValue) => setScore(newValue)}
                    />
                </Stack>
            </DialogContent>

            <DialogActions>
                <ThemeButton
                    onClick={handleRateMovie}
                    text={"save"}
                    style={"primary"}
                />

                <ThemeButton onClick={handleClose} text={"cancel"} />
            </DialogActions>
        </Dialog>
    );
}

export default MovieWatchRateDialog;

Any help would be much appreciated and if you need more information let me know.