How do i correctly create event handling for the state of a second level element in a nested array (React)

Question

I'm using React-PDF to dynamically create a PDF-document when a user enters info into textareas in a form. The form data is saved into an array which also contains a nested array among the regular fields.

The basic form is working great as of now but I cannot get the event handler for the form fields which handle the nested array to work.

I have tried mapping up both the main Array and the nested Array into the event handler for the fields which are not working but cannot get it to work.

handleMatters = idx => evt => {
    const newMatters = this.state.protocolMatters.map(
      (protocolMatter, sidx) => {
        if (idx !== sidx) return protocolMatter;
        return {
          ...protocolMatter,
          [evt.target.name]: evt.target.value
        };
      }
    );
    this.setState({ protocolMatters: newMatters });
  };

This is the basic code that use to work when the array "protocolMatters" was not nested. Now "protocolMatters" resides inside another array called "protocolData" which breaks this function.

The actual "Matters" which uses the "handleMatters" function are dynamic and the user themselves chooses how many of "Matters" their PDF document needs, which is why the function keeps track of the index for each matter.

I wish to be able make the event handling work OnChange for the nested array. As of now the fields which uses the "handleMatters" function do not change when a user tries to input something in the fields.