Нужно перерендерить функциональный компонент

У меня есть компонент

const MovieDetail = (props) => {


    //const [state, setstate] = useState(initialState)

    const { id } = useParams();
    const movie = useSelector(getMovie)
    const movies = useSelector(getAllMovies)
    const dispatch = useDispatch();
    useEffect(() => {
        fetchMovieById(id)
        .then((response) => dispatch(addMovie(response)))
    }, [movies])

    const onSubmit = (fromData) => {
        //here
        dispatch(addComments({fromData, id, movies}));
        
        console.log(fromData);
    }
    
    return (
        <div className='container'>
            <br/>
            {
                <div className='detail'>
                    <div>
                        <h2>{movie.title}</h2>
                        <div>
                            <img src={movie.img} alt={movie.title}/>
                        </div>
                    </div>
                    <div className='description'>
                        <div>
                            {movie.details}
                        </div>
                        <div className='comments'>
                            <h5>Stay your comment here</h5>
                            <CommentReduxForm onSubmit={onSubmit}/>


                        </div>
                        <div className='comments'>
                            {movie.comments ? movie.comments : <div>no comments yet</div>}
                        </div>
                        <div className='ratio'>
                            <strong>Ratio: {movie.ratio}</strong>
                        </div>
                    </div>
                </div>
                
            }
        </div>
    )
}

export default MovieDetail

Я использую redux toolkit я пытаюсь добавить комментарий к фильму, то есть я захожу на сайт, выбираю фильм и в форму ввожу комментарий, затем добавляю его, проверяю в devtools он там появляется, но теперь получается мне нужно перерендерить компонент, здесь ещё важна пометка, что этот коммент пропадёт, когда я обновлю страницу, я пока ещё не знаю как их сохранять и вообще не планирую в бэкэнд лезть, буду наверно сохранять на уровне localstorage, но пока ещё не разобрался с этим. А это мой редьюсер с экшенами

const initialState = {
    movies: [],
    movie: {}
}


const movieSlice = createSlice({
    name: "movies",
    initialState,
    reducers: {
        addMovies: (state, {payload}) => {
            state.movies = payload;
        },


        addMovie: (state, action) => {
            state.movie = action.payload[0];
        },
        addComments: (state, action) => {
            debugger
            let author = action.payload.fromData.yourName;
            let comment = action.payload.fromData.yourComment;
            let movieId = action.payload.id;
            let moviesArr = action.payload.movies;
            let obj = moviesArr.find((item) => item.id == movieId);
            let newObj = {...obj, comments: comment}

            const newArr = moviesArr.map(o => {
                if (o.id === newObj.id) {
                    return newObj;
                }
                return o;
            })
            state.movies = newArr;
        }
    },

});

export const {addMovies, addMovie, addComments} = movieSlice.actions;

export const getAllMovies = (state) => state.movies.movies;
export const getMovie = (state) => state.movies.movie;

export default movieSlice.reducer;

Давно не могу с этим разобраться, помогите кто знает как и может что посоветуете насчт того, как сделать чтоюы комментарии не удалялись после обновления страницы?

и да, там комментарий добавляется просто как строка, это сейчас вообще не суть, я потом изменю это на массив объектов, у каждого комментария будет id, author, text.. сейчас главное понять, как сделать основное.