如何更改列表中的特定元素而不在反应中创建单独的组件？

import { useState } from "react"
import "./HiddenText.css"

const TextList = [
    {textStart: "Twenty-five hours had passed since the incident. It seemed to be a lot longer than that.", 
    textEnd: " That twenty-five hours seemed more like a week in her mind. The fact that she still was having trouble comprehending exactly what took place wasn't helping the matter. She thought if she could just get a little rest the entire incident might make a little more sense.",
    threeDots: "...",  
    key: 1},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 2},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 3},

    {textStart: "Another productive way to use this tool to begin a daily writing routine.", 
    textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
    threeDots: "...",   
    key: 4},


]

export default function HiddenText() {
    const [toggleText, setToggleText] = useState(false)
    const [toggleThreeDots, setThreeDots] = useState(true)
    const [textBtn, setTextBtn] = useState("показать дополнительно")

    function openText() {
        setToggleText(toggleText => !toggleText)
        setThreeDots(toggleThreeDots => !toggleThreeDots)
        
        if (textBtn === "показать дополнительно") {
            setTextBtn("скрыть")
        } else {
            setTextBtn("показать дополнительно")
        }
    }
    
    return(
        <div className="HiddenTextContainer">
            {
                TextList.map(item => {
                    return(
                        <div className="elemCartText" key={item.key}>
                            <p>

                                {item.textStart}
 
                                {toggleThreeDots && <span>
                                    {item.threeDots}
                                </span>}

                                {toggleText && <span>
                                    {item.textEnd}
                                </span>}

                            </p>

                            <button onClick={openText}>
                                 {textBtn}
                            </button>
                        </div>

                    )
                })
            }
        </div>
    )
}