How can I hide column based on a specific breakpoint ?

const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    ...(isLargeScreen && 
      [columnHelper.accessor('firstName', {
          header: 'First Name',
          cell: info => info.getValue(),
          footer: info => info.column.columnDef.header
        })
      ])
]

const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    columnHelper.accessor('firstName', {
      meta: { hidden: isSmallScreen },
      header: 'First Name',
      cell: info => info.getValue(),
      footer: info => info.column.columnDef.header
    })
]