I am trying to hide (using display: none) a column in my array of objects in the fourth table, but it doesn’t work.I want to somehow pass hiding to the rendered table.

function Data() {
 return (
   <MyTableData row1={row1} col1={col1}/>
   <MyTableData row2={row2} col2={col2}/>
   <MyTableData row3={row3} col3={col3}/>
   <MyTableData row4={row4} col4={col4}/>
 )
}

I am trying to pass data to one of the rendered tables:

const hideTable = columns.map((item) => item.value === "Animals" ? {display: 'none'} : null);

 <MyTableData row4={row4} col1={col4} hideTable={hideTable}/>