How do I create a React Consumer within a component file itself?

import React, { Component } from 'react'
import Data from './Data'
const Context = React.createContext()

export class Provider extends Component {
  constructor() {
    super()
    this.data = new Data()
  }

  render() {
    const value = { data: this.data }
    return (
      <Context.Provider value={value}>{this.props.children}</Context.Provider>
    )
  }

  signIn = async () => {}

  signOut = () => {}
}

export const Consumer = Context.Consumer

/**
 * A higher-order component that wraps the provided component in a Context Consumer component.
 * @param {class} Component - A React component.
 * @returns {function} A higher-order component.
 */

export default function withContext(Component) {
  return function ContextComponent(props) {
    return (
      <Context.Consumer>
        {context => <Component {...props} context={context} />}
      </Context.Consumer>
    )
  }
}

import React, { Component, Fragment } from 'react'
import Link from 'next/link'
import withContext from '../Context'

class UserSignUp extends Component {
  // yada yada yada
  submit = () => {
    const { context } = this.props
    const { name, email, password } = this.state
    const user = { name, email, password }
    context.data
      .createUser(user)
      .then(errors => {
        if (errors.length) {
          this.setState({ errors })
        } else {
          console.log(`${email} is successfully signed up and authenticated!`)
        }
      })
      .catch(err => {
        console.log(err)
        this.props.history.push('/error')
      })
  }
}
export default withContext(UserSignUp)