Rendering columns based on the given props in the parent component

[thsnyzkn]

The thing that I am trying to achieve is someting like this;
I have this prop named as deleteWithButton with the type of Boolean, and based on the value of this prop I want to render one specific column.
in App.js

            <Table
                columns={columns}
                data={data}
                deleteWithButton

in Table.js

     .....
     hooks => {
hooks.allColumns.push(columns => [
        {
          ...columns,
deleteWithButton && 

{
              id: 'deleteWithButton',
              Header: () => {
                return (
                  <>
                    <span>Column Title</span>
                  </>
                );
              },
              Cell: ({ row }) => {
                return (
                  <div className="container">
                   Something smth.
                  </div>
                );
              },
            }
   } }
    ......

However, one I don't provide the prop deleteWithButton I get an error that says
"TypeError: Cannot read property 'id' of undefined"

I get it if the header does not exist at all it couldn't find the regarding id, but I don't know how to skip if the prop's not provided.

Thanks in advance.