How to use the @patternfly/react-core.PageSectionVariants.light function in @patternfly/react-core

itemCount={productsCount}
        perPage={Number(perPage) || 20}
        page={Number(page)}
        onPerPageSelect={selectPerPage}
        onNextClick={(_ev, page) => goToPage(page)}
        onPreviousClick={(_ev, page) => goToPage(page)}
        onFirstClick={(_ev, page) => goToPage(page)}
        onLastClick={(_ev, page) => goToPage(page)}
        perPageOptions={[ { title: '10', value: 10 }, { title: '20', value: 20 } ]}
        variant={variant}
      />
    )
  }

  return (
    
      
        
          <title size="2xl">Products</title>
        
        
          <button href="/apiconfig/services/new" data-testid="productsIndexCreateProduct-buttonLink">
            Create Product
          </button>
        
      
      <p></p>

);
    const pageId = 'main-content-page-layout-expandable-nav';
    const PageSkipToContent = Skip to Content;

    return (
      
        
          
            
              
              
            
          
          
            
              {Array.apply(0, Array(10)).map((x, i) => (
                
                  
                    This is a card

render() {
    const { showForm } = this.state;
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    return (
      
        
          {showForm ? (
            
          ) : (
            
          )}
          <div>
            
              </div>

header={Header}
          sidebar={Sidebar}
          isManagedSidebar
          skipToContent={PageSkipToContent}
          mainContainerId={pageId}
        >
          
            
              
              
            
          
          Light
          Dark
          Darker
          Content
        
      
    );
  }
}

);
    const Sidebar = ;

    return (
      
        Section with darker background
        Section with dark background
        Section with light background
      
    );
  }
}

};

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        topNav={PageNav}
      />
    );

    return (
      
        
        
          
            
              
              
            
          
          
            
              {Array.apply(0, Array(50)).map((x, i) => (
                
                  
                    This is a card

render() {
    return (
      
        

handleEdit={this.handleEdit}
                editInstance={() => this.state.editInstance}
                addNotification={add}
              />
               this.state.deleteInstances}
                addNotification={add}
              />
            
          )}
        
        
            
              
                
                  
                
                
                   this.openDeleteModal(this.getSelectedInstances())}
                  />
                
              
              
                
                  {this.createPaginator()}

render() {
    return (
      
        
          
            
            
          
        
        
          
            
              
                
                  
                    {this.renderSearchBox()}

render() {
    if (this.state.redirect) {
      return (
        
      );
    }

    return (
      
        
          {" "}
          
            
              
                
                  {this.icap(this.entity)}
                
                {this.parentItem()}