ReactJS on second click counter is 1

I have a React app and I want to have the corresponding functionality. I want to select a row when I click on it, and deselect it when I click on it a second time and deselect when I click on another row.

This is my code if it useful to someone:

const TableRow = (props) => {
const [isClicked, setClicked] = useState(false);
const array = Object.entries(props);
const navigate = useNavigate();
let counter = 0;

const deleteContact = async (e) => {
    e.preventDefault();

    const id = e.target.getAttribute('id');

    await requester(urls.accountWithId + '/' + id, methods.delete);

    await requester(urls.contacts + '/' + id, methods.delete)
        .then(() => {
            navigate(urls.mainPage);
            notificationsReceiver('Contact is deleted successfully!');
        })
        .catch((e) => {
            alert(e.message);
        })
};

const navigateToDetails = (e) => {
    e.preventDefault();

    const id = e.target.getAttribute('id');

    navigate(urls.details + '/:' + id);
};

const editContact = async (e) => {
    e.preventDefault();

    const id = e.target.getAttribute('id');

    navigate(urls.editContact + '/:' + id);
}

return (
    <tr className={styles['contact-row']} id={array[1][1].id} onDoubleClick={navigateToDetails} onClick={() => setClicked(true)} key={props[0]}>
        <td id={array[1][1].id}>{array[1][1].name}</td>
        <td id={array[1][1].id}>{array[1][1].continentAndCountry}</td>
        <td id={array[1][1].id}>{array[1][1].email}</td>
        <td id={array[1][1].id}><a href={array[1][1].baseUrlForFreeGuyz + '/' + array[1][1].accountNameForFreeGuyz}>{array[1][1].accountNameForFreeGuyz}</a></td>
        <td id={array[1][1].id}><a href={array[1][1].baseUrlForInstagram + '/' + array[1][1].accountNameForInstagram}>{array[1][1].accountNameForInstagram}</a></td>
        <td id={array[1][1].id}><a href={array[1][1].baseUrlForTwitter + '/' + array[1][1].accountNameForTwitter}>{array[1][1].accountNameForTwitter}</a></td>
        <td id={array[1][1].id}>{array[1][1].accountType}</td>
        <td>
            {isClicked && <>
                <button className="btn btn-warning edit-button" id={array[1][1].id} onClick={editContact}>Edit</button>
                <button className="btn btn-danger" id={array[1][1].id} type="submit" onClick={deleteContact}>Delete</button></>}
        </td>
    </tr>
);
}

export default TableRow;

Please help me.

>Solution :

you have to store the selected row data in some state variable and using this variable you have to change the style of the stored row.

when you click it on the second time check if the row data is already stored in the state or not. if it is stored remove the data from the state this will cause a rerender and the styles on the selected row will go away.

if you clicked on another row just check that the stored row data in the state is equal to the current row that you have clicked on. If the data don’t match replace the second-row data with the previous row data in the state. this will deselect the previous row and selects the new row.