<Rating /> component to be fully controlled

[kevingjs]

How should I set the <Rating /> component to be completely controlled? That is, the value depends completely on some state.

Because even if I don't specify the onClick and initialValue attributes, <Rating /> will set the star value on click. I need the <Rating /> component to be completely dependent on some state like const [ rate, setRate ] = useState(0).

Example:

This way the component still sets the stars that are filled when clicked, even if the rate state didn't change.

import { useState } from 'react';
import { Rating } from 'react-simple-star-rating';

const App = () => {
    const [ rate, setRate ] = useState(0);
    const isLogged = false;
    
    const handleRate = value => {
        if (!isLogged) return; // here I'm trying to prevent stars to be filled if isLogged is false
        setRate(value);
    };
    
    return (
        <Rating
            initialValue={ rate }
            onClick={ handleRate }
            iconsCount={ 5 }
            allowFraction
        />
    );
};