ReactStars component can't set useState - calls TypeError: Cannot read properties of undefined (reading 'name')

I'm quite new to React and can't seem to figure out how to resolve this issue. Maybe a stupid question but here it goes.

I'm trying to make a system where each Person can add skills and a rating of those skills. Each array consist of a skill element as a string and a star element as an integer. I've made some dynamic inputfields with an add and a remove function for more/less inputfields.

For each inputfield I have an onchange function handleChangeInput and this works fine with skills as this is has a property of "name".

Now when trying to fetch the value from ReactStars I get the error: Uncaught TypeError: Cannot read properties of undefined (reading 'name'). This error is called from the handleChangeInput function. ReactStars doesn't have any property of type either.

How will I be able to fetch the value from ReactStars, if it's even possible? I want to set the useState of inputfields with the values of skill and stars of course.

Image of the TypeError.

The component I use is: react-rating-stars-component

https://www.npmjs.com/package/react-rating-stars-component

Hope this explains the problem. Otherwise let me know. Thanks.

const [data, setData] = useState({});
const [inputField, setInputField] = useState([{ skill: "", stars: 0 }]);

const handleChangeInput = (index, event) => {
    const values = [...inputField];
    values[index][event.target.name] = event.target.value;
    setInputField(values);
    setData(values);
  };

const handleAddFields = () => {
    setInputField([...inputField, { skill: "", stars: 0 }]);
  };

  const handleRemoveFields = (index) => {
    const values = [...inputField];
    console.log(inputField.length);
    values.splice(index, 1);
    setInputField(values);
    setData(values);
  };

return(
       <div>
         {inputField?.map((inputField, index) => (
            <div key={index}>
              <Row>
                <Col xs={5} md={5}>
                  <Form.Group as={Col}>
                    <Form.Control
                      className="mb-3"
                      type="text"
                      id="skill"
                      name="skill"
                      value={inputField?.skill}
                      onChange={(event) => handleChangeInput(index, event)}
                    />
                  </Form.Group>
                </Col>
                <Col xs={4} md={4}>
                  <Form.Group>
                      <ReactStars
                        type="number"
                        name="stars"
                        count={5}
                        size={24}
                        id="stars"
                        onChange={(event) => handleChangeInput(index, event)}
                        color="rgba(230, 230, 230, 255)"
                        emptyIcon={<i className="fa-solid fa-star"></i>}
                        filledIcon={<i className="fa-solid fa-star"></i>}
                        value={inputField.stars}
                      />
                    </Form.Group>
                </Col>
                <Col xs={3} md={3}>
                  <div className="btn-section">
                    <button
                      type="button"
                      className="round-btn"
                      onClick={() => handleAddFields()}
                    >
                      <i className="fa-solid fa-plus"></i>
                    </button>
                    <button
                      type="button"
                      className="round-btn"
                      onClick={() => handleRemoveFields(index)}
                    >
                      <i className="fa-solid fa-minus"></i>
                    </button>
                  </div>
                </Col>
              </Row>
            </div>
          ))}
        </div>
);