React onClick event to only fire for the clicked div and not the other once

Hello I have stumbled across a big problem I have some div containers all coming from API through being mapped so there are loads of them. I’m running onClick event on them but when I press onClick I dont want all off them to fire up. How do I stop them all from firing up and only the one clicked to show up?

Hosting the project here click on the comments and you can see what I mean they all fire up
https://xenodochial-kilby-1c5b3b.netlify.app/

the github repo:

It is this project:
https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-and-redux-portfolio-project/modules/fecp-reddit-client/kanban_projects/reddit-client

Here is the code:

Home.js

const Home = () => {

    console.log(reddit.getPost());
    const [divPress, setDivPress] = useState(false);
    const [permalink, setPermalink] = useState(''); // tried many different useStates but didnt help
    const [savedWord, setSavedWord] = useState('');
    const [arr, setArr] = useState([]);
    // const [point, setPoint] = useState('');

    const loading = useSelector(isLoading);
    const subHome = useSelector(selectHome);
    const refDivClick = useRef([document.getElementsByClassName('target-divs')]); // might just delete // only sendinf 1 back wtf

    const dispatch = useDispatch();
    // console.log(refDivClick)
    
    useEffect(() => {
        window.addEventListener('load', () => {
            dispatch(homeSubredditThunk());
        })
        return () => {
            window.removeEventListener('load', () => {
                dispatch(homeSubredditThunk());
            })
        }
    }, [dispatch]);


    /// THIS SECTION HERE IS THE CLICK HANDLER
    const commentClicked = (e, perma, index) => {

        const divs = document.getElementsByClassName('target-divs');
        // console.log(divs[index].getAttribute('key'));

        if (perma !== divs[index].getAttribute('value')) {
            setDivPress(false)
        } else {
            console.log("same index")
            dispatch(postThunk(perma));
            setDivPress(!divPress)
        }
        
    }
    
    const regexValidation = /\.(:?jpg|gif|png)$/;

    if (loading) {
        return <div style={{position: 'relative', top: '180px'}}>Loading...</div>
    }

    
    return (
        <>

            {
                subHome.map((home, index) => 
                    <div 
                        style={{backgroundColor: `rgba(${colorNum()}, ${colorNum()}, ${colorNum()}, 0.4)`}}
                        className="reddit-div">
                        <Card 
                            // key={uuidv4()}
                            index={index}
                            home={home}
                            rgx={regexValidation}
                            formatter={formatter}
                            commentClicked={commentClicked}
                            divPress={divPress}
                            referance={refDivClick}
                            work={permalink}
                        /> 
                    </div>
                )
            }
        </>
    )
}


export default Home;

and its Child,
Card.js

const Card = (props) => {
    const { home, index, rgx, formatter, commentClicked, divPress, referance, work } = props;

    // const genId = uuidv4();

    const allPost = useSelector(selectPost)

    return (
        <>
        <ul className="reddit-ul" >
                        
            <li className="reddit-li" key={home.id}>
                <span className="reddit-score">Score: {formatter(home.score)}</span>
                <p className='reddit-subreddit'>{home.name}</p>
                <p className='reddit-title'>{home.title}</p>
                { 
                    rgx.test(home.url) && 
                    <div className="reddit-img-container" >
                    <img src={home.url} alt="home img"/>
                    </div>
                }

                {
                    home.comments > 0 && ///// here is the comments im trying to click on to just display 1
                    <div //this is the div I want the click to happen with
                        ref={referance} 
                        key={home.id}
                        value={home.permalink} 
                        onClick={(e) => commentClicked(e, home.permalink, index)} 
                        className="reddit-comments target-divs"
                    >
                        <svg value={home.permalink} className="reddit-symbol" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path value={home.permalink} d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625l-1.993 6.368 6.946-3c1.705.439 3.334.641 4.864.641 7.174 0 12.136-4.439 12.136-9.634 0-5.812-5.701-10.007-12-10.007zm0 1c6.065 0 11 4.041 11 9.007 0 4.922-4.787 8.634-11.136 8.634-1.881 0-3.401-.299-4.946-.695l-5.258 2.271 1.505-4.808c-1.308-1.564-2.165-3.128-2.165-5.402 0-4.966 4.935-9.007 11-9.007zm-5 7.5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
                        <p value={home.permalink}>Comments {formatter(home.comments)}</p>
                    </div> // why i put home.permalink on all is because if I click on comment without that value then it doesnt register it only show what inside p has
                } 
                    {/* THE ABOVE DIV IS WHAT I WANT THE EVENT CLICK TO ONLY TRIGGER FOR 1 DIV ONLY */}

                <p className='reddit-author'>{home.author}</p>
            </li>


        
        </ul>

        { // THEN AFTER THAT AS A RESULT DISPLAY THE BIT BELOW HERE
            divPress ?
            <div className="posts-bits">
        
        {  
            allPost.length > 0 && allPost.map(child => 
                <div key={uuidv4()}>
                <p>{child.body}</p>
                <svg className="reddit-symbol" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path value={home.permalink} d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625l-1.993 6.368 6.946-3c1.705.439 3.334.641 4.864.641 7.174 0 12.136-4.439 12.136-9.634 0-5.812-5.701-10.007-12-10.007zm0 1c6.065 0 11 4.041 11 9.007 0 4.922-4.787 8.634-11.136 8.634-1.881 0-3.401-.299-4.946-.695l-5.258 2.271 1.505-4.808c-1.308-1.564-2.165-3.128-2.165-5.402 0-4.966 4.935-9.007 11-9.007zm-5 7.5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
                

                </div>
                
            )
        }
        </div> : null

        }




        </>
    )
}

export default Card;

And more precisely where the problem is I believe from both files combined together I think,

/// THIS SECTION HERE IS THE CLICK HANDLER
    const commentClicked = (e, perma, index) => {

        const divs = document.getElementsByClassName('target-divs'); // tried alot of different things cant find a solution.
        // console.log(divs[index].getAttribute('key'));

        if (perma !== divs[index].getAttribute('value')) {
            setDivPress(false)
        } else {
            console.log("same index")
            dispatch(postThunk(perma));
            setDivPress(!divPress)
        }
        
    }

// AND I AM running a Map over this

                subHome.map((home, index) => 
                    <div 
                        style={{backgroundColor: `rgba(${colorNum()}, ${colorNum()}, ${colorNum()}, 0.4)`}}
                        className="reddit-div">
                        <Card 
                            // key={uuidv4()}
                            index={index}
                            home={home}
                            rgx={regexValidation}
                            formatter={formatter}
                            commentClicked={commentClicked}
                            divPress={divPress}
                            referance={refDivClick}
                            work={permalink}
                        /> 
                    </div>

// So inside the card here is the relevant bit

 {
                    home.comments > 0 && ///// here is the comments im trying to click on to just display 1
                    <div //this is the div I want the click to happen with
                        ref={referance} 
                        key={home.id}
                        value={home.permalink} 
                        onClick={(e) => commentClicked(e, home.permalink, index)} 
                        className="reddit-comments target-divs"
                    >
                        <svg value={home.permalink} className="reddit-symbol" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path value={home.permalink} d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625l-1.993 6.368 6.946-3c1.705.439 3.334.641 4.864.641 7.174 0 12.136-4.439 12.136-9.634 0-5.812-5.701-10.007-12-10.007zm0 1c6.065 0 11 4.041 11 9.007 0 4.922-4.787 8.634-11.136 8.634-1.881 0-3.401-.299-4.946-.695l-5.258 2.271 1.505-4.808c-1.308-1.564-2.165-3.128-2.165-5.402 0-4.966 4.935-9.007 11-9.007zm-5 7.5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
                        <p value={home.permalink}>Comments {formatter(home.comments)}</p>
                    </div> // why i put home.permalink on all is because if I click on comment without that value then it doesnt register it only show what inside p has
                } 
                    {/* THE ABOVE DIV IS WHAT I WANT THE EVENT CLICK TO ONLY TRIGGER FOR 1 DIV ONLY */}

                <p className='reddit-author'>{home.author}</p>
            </li>


        
        </ul>

        { // THEN AFTER THAT AS A RESULT DISPLAY THE BIT BELOW HERE
            divPress ?
            <div className="posts-bits">
        
        {  
            allPost.length > 0 && allPost.map(child => 
                <div key={uuidv4()}>
                <p>{child.body}</p>
                <svg className="reddit-symbol" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path value={home.permalink} d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625l-1.993 6.368 6.946-3c1.705.439 3.334.641 4.864.641 7.174 0 12.136-4.439 12.136-9.634 0-5.812-5.701-10.007-12-10.007zm0 1c6.065 0 11 4.041 11 9.007 0 4.922-4.787 8.634-11.136 8.634-1.881 0-3.401-.299-4.946-.695l-5.258 2.271 1.505-4.808c-1.308-1.564-2.165-3.128-2.165-5.402 0-4.966 4.935-9.007 11-9.007zm-5 7.5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm5 0c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
                

                </div>
                
            )
        }
        </div> : null

        }

Thanks, any ideas solutions is most appreciated