Hello guys, It is not keeping the format :(

[larts85]

Hello and first of all thanks, it's a nice feature.

I'm having this issue:

When I select and number of stars the format do not change at the first click (generally), I need to press several times. And the principal issue is that after rate when I begin typing at next input the format disappear. It doesn't behave like the secondExample : Thanks in advance!

const secondExample = {
  size: 50,
  count: 10,
  char: '',
  color1: '#ff9900',
  color2: '#6599ff',
  onChange: newValue => {
    console.log(`Example 2: new value is ${newValue}`)
  }
}

This is my code:

function EditReview({editReview, user, product}) {
  const[show, setShow] = useState(false);
  const [stars, setStars] = useState(0);
  const [description, setDescription] = useState('');

  const handleOnclick = (e) => {
    e.preventDefault();
    setShow(true);
  }
  const handleOnChange = (e) => {
    e.preventDefault();
    setDescription(e.target.value)
    console.log(e.target.value)
  }

  const handleOnSubmit = (e) => {
    e.preventDefault();
    const review = {
      description: description,
      qualification: Math.round(stars),
      userdId: user.id
    };
    const id = product.id
    editReview(id, review);
    setShow(false);
  }
  const star = {
    count:5,
    onChange: stars=>setStars(stars),
    size: 74,
    color2: '#8a2be2',
    half: false,
  }
  return (
    <React.Fragment>
      <Button 
        onClick={(e)=>handleOnclick(e)}
        className=""
      >Edit review
      </Button>
      <Modal 
        show={show} 
        onHide={()=>setShow(false)}
        keyboard={true}
        animation={true}
        centered={true}
      >
        <Modal.Header
          closeButton={true} 
          closeLabel={'Close'}
        >
          <Modal.Title>Change your review</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Rate the product.</h4>
          <Form>
            <ReactStars {...star}/>
            <hr/>
            <h4>The new product review?</h4>
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Text>Your review</InputGroup.Text>
              </InputGroup.Prepend>
              <FormControl 
                as="textarea"  
                aria-label="Description" 
                placeholder="I hope it's for better"
                onChange={e=>handleOnChange(e)}
              />
            </InputGroup>
          </Form>
        </Modal.Body>
//                  ...