How can I correctly use the React context API in a class based component?

Question

I am trying to create an orders page. It is similar to a shopping cart. I want to display items that have been ordered on this page. The orders Page has been created separately. I have a modals page and I am trying to get the items from the modal to the orders Page.

This is the JSX code for the Context API

import React, {useState} from 'react';

export const CartContext = React.createContext();

export const CartProvider = (props)=>{
  const [orders, setOrders] = useState([]);
  return (
    <CartContext.provider value={[orders, setOrders]}>
     {props.children}
    </CartContext.provider>
  )
}

JSX code for the modal

class pizzaModal extends Component {
  state = {
    selected: "small",
    showModal: true,
    
  }
  static contextType = CartContext
  toggleHandler = (size)=> ()=>{
    this.setState({
            toggle: size
        });
  }
  
    

  addToOrders = ()=>{
    const [orders, setOrders] = this.contextType;
    const pizza = {name: this.props.name, ingredients: this.props.ingredients, image: this.props.image, price: this.props.price}
    setOrders(curr=> [...curr, pizza])
  }
  
  render (){
    
    let attachedClasses = [styles.ImageContainer]
    if(this.state.toggle==='small'){
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if(this.state.toggle==="medium"){
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if(this.state.toggle==="large"){
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <Aux>
        <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={this.props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{this.props.name}</h1>
                  <p>{this.props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler("small")}
                            checked={this.state.toggle==="small"}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler("medium")}
                            checked={this.state.toggle==="medium"}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler("large")}
                            checked={this.state.toggle==="large"}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button onClick={this.addToOrders}>Add to basket for ₦{this.props.price}</button>
                </div>
              </div>
              </div>
            </div>  
            <div className={styles.Navbar} onClick={this.props.clicked}>
            <div></div>
            <div></div>
          </div>
          </div>
         
      </div>
      </Aux>
    )
  }
}
export default pizzaModal;

JSX code for the Order component where I am trying to use the JSX code

<div className={Styles.OrderHeader}>
         <div>
          <img src={Logo} alt="logo"/>
          <h1>DODO PIZZA</h1>
         </div> 
        </div>  
        <h1 className={Styles.OrderContentContainerHeader}>My order</h1>
       <div className={Styles.OrderContentContainer}>
          <div className={Styles.OrderContent}>
            <div>
               <div style={{paddingRight: '80px'}}>
                 <img src={orders.image} alt="pizza"/>
               </div>
               <div>
                 <h1>{orders.name}</h1>
                 <p>{orders.ingredients}</p>
               </div>
            </div>
            <div className={Styles.OrderContentPrice}>
               <div><span>1</span></div>
               <div><span>₦{orders.price}</span></div>
            </div>

When I click on the event listener that has the add to orders function I get an error of undefined is not iterable. If I take the declared variables out, I get warnings all over. If I declare them in the render method, I dont get an warnings but I get an undefined on the setOrders function.