React как поменять в списке отдельную кнопку

У меня есть список, который рендерит контент из базы, у каждого элемента списка есть кнопка "В избранное", чтобы переместить элемент в начало рендера. Проблема в том, что я не знаю как изменить иконку отдельного элемента при нажатии на кнопку "В избранное" ( звёздочка ).

Я попытался сделать через LocalState, но из-за этого при нажатии на отдельную кнопку "В избранное", меняются сразу все

До нажатия

После

Код компонента

import { useState } from "react"

const WaysItem = (props) => {
    let [change, setChange] = useState(false)
    return props.directionsToRender.map((item, index) => (
        <li
            className={`ways-item`}
            key={index}
            onClick={() => {
                props.getCurrentDirections(index)
            }}
        >
            <div>
                <h5>{item.title}</h5>
            </div>
            <div className="ways-kilometrs">
                <div>{item.direction.routes[0].legs[0].distance.text}</div>
                <div>{item.direction.routes[0].legs[0].duration.text}</div>
            </div>
            <button onClick={() => setChange((change) => !change)} key={index}>
                <i className={`${!change ? "far" : "fas"} fa-star`}></i>
            </button>
        </li>
    ))
}

export default WaysItem