REACT-display/hide rows in table via visibilityicon/visibilityofficon

See more:

Javascript

React

react-native

Hello, I'm new to REACT, I want to hide/display a row if I click on VisibilityIcon/VisibilityiconOff. The icon will be put for each row on the Show column in my table.

Here what I have done but when I click on the icon Display VisibilityIcon all the table is hidden instead of hiding only the row and display the VisibilityOffIcon:

What I have tried:

    export default function MenuDetail() {
    const { menuId } = useParams();
    const { match } = JsonRules;
    const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
    const [show, setShow] = useState(true);

    const data = useMemo(
        () => [
            //some headers ....
            {
                Header: 'Show',
                accessor: (row) => <button onClick={() => setShow(!show)}>
                    {show ?
                        <VisibilityIcon/>
                        :
                        <VisibilityOffIcon/>
                    }
                </button>
            }
        ],[]
    );
    ...
    return (
        {
            show?
                <Table
                    data = { matchData }
                    columns = { data }
                    initialState = { initialState }
                    withCellBorder
                    withRowBorder
                    withSorting
                    withPagination
                />
            : null
        }
    );
}

I try to browse the Table to get each row with map but not working. I believe my syntaxe is wrong...