Как изменить значение объекта массива состояний с помощью определенного индекса массива

Question

Я пытаюсь изменить значение ключа объекта из массива состояний с помощью setState. Изменение должно быть таким, чтобы из массива индекса i было изменено только определенное значение объекта. Этот индекс передается следующим образом:

import React from "react";
import {Button} from 'react-bootstrap';

class StepComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 
                    step: "Step1",
                    visited: false
                },
                { 
                    step: "Step2",
                    visited: false
                },
                { 
                    step: "Step3",
                    visited: false
                }
            ]
        };
    }
    nextStep(i) {

        //Change the visited value of object from data[i] array from false to true
        //Something like below

        this.setState({
            data[i]:visited to true
        })
    }

    render(){
        let visitSteps = this.state.data;
        return(
            <div>
                {visitSteps.map((visitedStep, index) => (
                    <div key={index}>
                        <p>{visitedStep.step}</p>
                        <Button onClick={() => this.nextStep(i)}>Continue</Button>
                    </div>
                ))}
            </div>
        )
    }
}

export default StepComponent

В соответствии с примером, приведенным выше для каждого события onClick, значение этого конкретного посещенного объекта изменяется с false на true