className statement not re-rending when useState is set - reactjs

Question

When I click a "Thread"/button handleClick get's called and the currentIndex is updated/set which triggers the button's className ternary statement to execute as true. However, as there are many <li> elements, the other elements do not re-render className to the false statement. currentIndex should not == thread.id for those elements.
ThreadItem component
import { useState } from 'react'
const ThreadItem = ({ thread, changeThread }) => {
const [currentIndex, setCurrentIndex] = useState('')
// On thread click
const handleClick = (threadId) => {
setCurrentIndex(threadId)
}
return (
<li className="chat-item">
<form onSubmit={changeThread}>
<button className={currentIndex == thread.id ? 'side-menu-links-focus threads' : 'side-menu-links threads'} onClick={() => handleClick(thread.id)}>{`#${thread.threadType}`}</button>
</form>
</li>
)
}
export default ThreadItem
Parent ThreadList component
import ThreadItem from './ThreadItem'
const ThreadList = ({ threads, changeThread }) => {
return (
<ul className='chat-list'>
{threads.map((thread) => (
<ThreadItem
key={thread.id}
thread={thread}
changeThread={changeThread}
/>
))}
</ul>
)
}
export default ThreadList

Answer 1

If I understand your problem correctly, you want to click a button, and have a single ThreadItem to change className.
The problem I see is that you have added useState to every ThreadItem. Instead, you should move the state above to the ThreadList component.
This way, there is only one instance of state for the entire list of items. Simply pass the active prop and an onClick handler to each ThreadItem.
ThreadList
import React, { useState } from 'react';
import ThreadItem from './ThreadItem';
const ThreadList = ({ threads, changeThread }) => {
const [currentIndex, setCurrentIndex] = useState('');
// On thread click
const handleClick = (threadId) => {
setCurrentIndex(threadId);
};
return (
<ul className="chat-list">
{threads.map((thread) => (
<ThreadItem
key={thread.id}
thread={thread}
changeThread={changeThread}
isActive={currentIndex === thread.id}
onClick={() => handleClick(thread.id)}
/>
))}
</ul>
);
};
export default ThreadList;
ThreadItem
import React from 'react';
const ThreadItem = ({ thread, changeThread, isActive, onClick }) => {
return (
<li className="chat-item">
<form onSubmit={changeThread}>
<button
className={isActive ? 'side-menu-links-focus threads' : 'side-menu-links threads'}
onClick={onClick}
>{`#${thread.threadType}`}</button>
</form>
</li>
);
};
export default ThreadItem;