In my list, when I click on row, the background of the changes color and the id of my row is added to the array of my state. It works, but when I do the reverse my array doesn't get empty when I use the filter function (line 15).

import React, {useState} from 'react';
import './Liste.css';
import Button from '../Button/Button';

function Liste(props) {

    const [nbLine, setNbLine] = useState([]);

    const clickLine = (e) =>
    {
        if (e.target.parentNode.className.length > 0)
        {
            console.log(e.target.parentNode.id);
            e.target.parentNode.classList.remove("lineClicked");
            nbLine.filter(line => line != e.target.parentNode.id);
            console.log(nbLine);         
        }
        else
        {
            e.target.parentNode.classList.add("lineClicked");
            nbLine.push(e.target.parentNode.id);
            console.log(nbLine);
        } 
    }

    const doubleClickLine = () =>
    {
        console.log("doubleClickLine"); 
    }

    return (
        <>
            <table className='tableList'>
                <thead>
                    <tr>
                        {props.headers.map((header, h) =>
                            <th key={h}>{header}</th>                   
                        )}
                    </tr>
                </thead>
                <tbody>
                    {props.records.map((record, r) =>
                        <tr key={r} id={props.table+"_"+record[0]} onClick={clickLine} onDoubleClick={doubleClickLine}>
                            {props.columns.map((column, c) =>
                                <td key={c}>{record[column]}</td>      
                            )} 
                        </tr>                
                    )}
                </tbody>
                <tfoot>
                    <tr>
                        <th colSpan={7}>
                            {props.buttons.map((button, b) =>
                                <Button key={b} id={button[0]} type={button[1]} value={button[2]} click={button[3]}/>              
                            )}
                        </th>
                    </tr>
                </tfoot>
            </table>
        </>
    )
}

export default Liste;

Here is the screen when I click (the elements are in the table). Note: the data is fictitious.

And here is the screen when I click again (the elements resent in the array).

And here is the screen when I click again (the elements resent in the array).

Why is the filter function not working?