How to save user input, update array, and render updated array on button press

I have a react web application that I am developing. The code from the component in question renders semesters of a degree 2 at a time. The user is able to see each class in a semester. There are buttons to go to the next two semesters as well as the previous two semesters. There is also a button to view all semesters at once. This is where my problem lies. In the 2 semester view the user has the option to edit any class that contains ‘Elective’ or ‘Cognate’. There is also a save button under each semester to manage the changes made (the handleSave function does nothing yet). When I make a change in the 2 semester view and then click on the button to display all semesters, my changes are not being reflected.

I have tried creating state variables that are a copy of the splitArray array and then updating that through the handleSave function but it didnt work. I also know that in the 2 semester view a new ‘items’ array is created every time out of the splitArray array. The items[1] is the name of the class to be edited. So i have no idea how to create a copy of the splitArray array with the edited items[1] being in the correct place. The first paragraph (following the showAll? is rendered when the display all button is pressed). The second paragraph is the 2 semester view in which the user is able to make edits.

{showAll
              ? splitArray.map((item, index) => (
                  <li key={index} style={{ display: 'inline-block', marginRight: '10px' }}>
                    <p>Semester {index + 1}:</p>
                    <div className="semester-lines">
                      <div>
                        <p style={{ display: 'flex', flexDirection: 'column' }}>
                          {item
                            .replace(/],/g, ']<br/>')
                            .replace(/[[]]/g, '')
                            .split('<br/>')
                            .map((line, index) => {
                              const items = line.split(',').map(item => item.trim());
                              
                              return (
                                <div key={index} style={{ display: 'flex', justifyContent: 'space-between' }}>
                                  <span style={{ padding: '5px', margin: '5px', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)' }}>
                                    {items[0]}
                                  </span>
                                  <span style={{ padding: '5px',maxWidth: '300px' ,margin: '5px', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)' }}>
                                    {items[1]}
                                  </span>
                                  <span style={{ padding: '5px', margin: '5px', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)', alignSelf: 'flex-end' }}>
                                    {items[2]}
                                  </span>
                                </div>
                              );
                            })}
                        </p>

                        
                      </div>
                    </div>
                  </li>
                ))


              : splitArray.slice(page, page + 2).map((item, index) => (
                  <li key={index} style={{ display: 'inline-block', marginRight: '10px' }}>
                    <p>Semester {index + 1 + page}:</p>
                    <div className="semester-lines">
                      <div>
                      <p style={{ display: 'flex', flexDirection: 'column' }}>
  {item
    .replace(/],/g, ']<br/>')
    .replace(/[[]]/g, '')
    .split('<br/>')
    .map((line, index) => {
      const items = line.split(',').map(item => item.trim());
      const isEditable = items[1].toLowerCase().includes('elective') || items[1].toLowerCase().includes('cognate');

      return (
        <div key={index} style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ padding: '5px', margin: '5px', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)', maxWidth: '100px', height: 'auto' }}>
            {items[0]}
          </span>
          {isEditable ? (
            <input
              type="text"
              defaultValue={items[1]}
              style={{ height: 'auto', minHeight: '40px', overflow: 'hidden', resize: 'none', padding: '5px', maxWidth: '300px', margin: '5px', color: 'white', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)', textAlign: 'center' }}
              
              onChange={e => (items[1] = e.target.value)}
            />
          ) : (
            <span style={{height: 'auto',boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)', padding: '5px', maxWidth: '300px', margin: '5px', backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)' }}>
              {items[1]}
            </span>
          )}
          <span style={{ padding: '5px', margin: '5px',  backgroundColor: '#323232', boxShadow: '6px 6px 6px rgba(0, 0, 0, 0.30)', alignSelf: 'flex-end' }}>
            {items[2]}
          </span>
        </div>
      );
    })}
</p>


<button onClick={() => handleSave()}>
                  Save
                </button>
              </div>
            
          </div>
        </li>
      ))}
  </ul>