title: How to set main row checkbox true if one or more than one sub row checkboxes are true?
body: <p>Table component</p>
  <pre><code>export const TableComponent = ({
    columns,
    rows,
    rowsloading = false,
    checkBoxes = false,
    checkboxesInSubCol = false,
    setArrayOfChecked,
    setArrayOfCheckedSubRow,
    arrayOfChecked = [],
    arrayOfCheckedSubRow = [],
    setAllChecked,
    setAllCheckedSubRow,
    allChecked = false,
    allCheckDisabled = false,
    allCheckSubRowDisabled = false,
    allCheckedSubRow = false,
    pagination = false,
    totalPages,
    currentPage,
    setCurrentPage,
    url = '',
    collapsable = false,
    subCol = [],
    subRowKey = '',
  }: TableProps): JSX.Element =&gt; {
  </code></pre>
  <p>if main row checkbox is true then make all its sub row checkbox true and vice versa</p>
  <pre><code>  const allCheckHandler = () =&gt; {
      if (!allChecked) {
        setArrayOfChecked([]);
        rows.forEach((item) =&gt; setArrayOfChecked((prev) =&gt; [...prev, item.id]));
      } else {
        setArrayOfChecked([]);
      }
      setAllChecked(!allChecked);
    };
  </code></pre>
  <p>if sub row checkbox is true then it makes all its children sub row checkboxes true and vice versa</p>
  <pre><code>const allVariantCheckHandler = (allVariantsChecked) =&gt; {
      if (allVariantsChecked) {
        setArrayOfCheckedSubRow([]);
        rows.forEach((item) =&gt; setArrayOfCheckedSubRow((prev) =&gt; [...prev, item.id]));
      } else {
        setArrayOfCheckedSubRow([]);
      }
      allVariantsChecked;
    }
  
    // const oneCheck = (oneVariantChecked) =&gt; {
    //   if (arrayOfCheckedSubRow.length &gt;= 1) {
        
    //   } else {
    //   setArrayOfCheckedSubRow([]);
    // }}
     
  </code></pre>
  <p>executing if main row checkbox is true then make all its children true</p>
  <pre><code>  return (
      &lt;&gt;
        &lt;Table className=&quot;negotiation-table&quot; celled&gt;
          &lt;Table.Header&gt;
            &lt;Table.Row&gt;
              {checkBoxes ? (
                &lt;Table.HeaderCell&gt;
                  &lt;Checkbox
                    disabled = {allCheckDisabled}
                    checked={allChecked}
                    onChange={() =&gt; allCheckHandler()}
                  /&gt;
                &lt;/Table.HeaderCell&gt;
              ) : null}
  </code></pre>
  <p>header cell of sub rows</p>
  <pre><code>            {columns.map((column) =&gt; (
                &lt;Table.HeaderCell key={column.key} colSpan={column.colSpan || 1}&gt;
                  {column.label} 
                &lt;/Table.HeaderCell&gt;
              ))}
            &lt;/Table.Row&gt;
          &lt;/Table.Header&gt;
          &lt;Table.Body&gt;
  </code></pre>
  <p>setting up the sub row or children of main row</p>
  <pre><code>          {!rowsloading ? (
              &lt;&gt;
                {rows &amp;&amp; rows.length &gt; 0 ? (
                  &lt;&gt;
                    {rows.map((row) =&gt; (
                      &lt;RenderTableRow
                        row={row}
                        col={columns}
                        checkBoxes={checkBoxes}
                        checkboxesInSubCol = {checkboxesInSubCol}
                        // allChecked={allChecked}
                        allCheckDisabled = {allCheckDisabled}
                        allCheckedSubRow = {allCheckedSubRow}
                        allCheckSubRowDisabled = {allCheckSubRowDisabled}
                        setAllChecked={allVariantCheckHandler}
                        setAllCheckedSubRow = {setAllCheckedSubRow}
                        setArrayOfChecked={setArrayOfChecked}
                        setArrayOfCheckedSubRow = {setArrayOfCheckedSubRow}
                        arrayOfChecked={arrayOfChecked}
                        arrayOfCheckedSubRow = {arrayOfCheckedSubRow}
                        url={url}
                        collapsable={collapsable}
                        subCol={subCol}
                        subRowKey={subRowKey}
                      /&gt;
                    ))}
                  ```
  </code></pre>
  <p><a href="https://i.stack.imgur.com/bvOKU.jpg" rel="nofollow noreferrer">link to the image of the refrence problem is below</a></p>