As the title says, trying to declare a component within my class, however, getting an Undefined error. Can I not do this or am I doing it wrong? As I said, I'm new to React so any bit of info helps. The overall goal is to create a form but I'm trying to only make certain options pop depending on what the previous options are. If the code is too much let me know, I'll trim it down to what's import but I figured I'd provide the whole thing cause it's not that long.

import React, {useState, useMemo} from 'react';
import ReactDOM from 'react-dom/client';
import countryList from 'react-select-country-list';
import './index.css';
//import App from './App';


class StartForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.options = countryList().getData();
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
    //alert('Your favorite flavor is: ' + this.state.value);
    console.log(this.state.accType);
  }

  handleSubmit(event) {
    //alert('Your favorite flavor is: ' + this.state.value);
    //event.preventDefault();
  }

//------------------- THIS COMPONENT
  CustomOptions(props) {
    return(
        <label>
          <input type="checkbox" id="acss_debit_payments" name="acss_debit_payments" value={this.value.acss_debit_payments} onChange={this.handleChange} />Paneer
        </label>
      );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Select Account Type:
          <select name="accType" value={this.state.accType} onChange={this.handleChange}>
            <option value="custom">Custom</option>
            <option value="express">Express</option>
            <option value="standard">Standard</option>
          </select>
        </label>
        <br/>
        <label>
          Select Country Code(Optional):
          <select name="country" options={this.options} value={this.state.country} onChange={this.handleChange}/>
        </label>
        <br/>
        <label>
          Email:
          <input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />

        {this.state.accType == "custom" &&
          <CustomOptions />
      }

      </form>
    );
  }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StartForm/>
  </React.StrictMode>
);