Uncaught TypeError – Getting errors after already defining state variable in React component constructor

I am getting the error: Uncaught TypeError: Cannot read properties of undefined (reading 'state') even though state is defined in the constructor of my React component. I get the error at the line where I set the value of the <input> to {this.state.deckName}

export class DeckForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            deckName: '',
            deckList: ''
        };
        // Bind our event handler methods to this class
        this.handleDeckNameChange = this.handleDeckNameChange.bind(this);
        this.handleDeckListChange = this.handleDeckListChange.bind(this);
        this.handleSubmission = this.handleSubmission.bind(this);
    }

    // Event handler method to update the state of the deckName each time a user types into the input form element
    handleDeckNameChange(event) {
        let typed = event.target.value;
        this.setState({ deckName: typed });
    }

    // Event handler method to update the state of the deckList each time a user types into the textarea from element]
    handleDeckListChange(event) {
        let typed = event.target.value;
        this.setState({ deckList: typed });
    }

    // Event handler method to handle validation of deckName and deckList
    handleSubmission(event) {
        console.log(`${this.state.deckName}`);
        console.log(`${this.state.deckList}`)
    }

    render() {
        return (
            <form className='was-validated'>
                <this.DeckName />
                <this.DeckList />
                <button type='submit' className='btn-lg btn-warning mt-3'>Create</button>
            </form>                       
        );
    }

    DeckName() {
        return (
            <div className='form-group mb-3'>
                <input 
                    value={this.state.deckName} /* ERROR HERE */
                    onChange={this.handleDeckNameChange} 
                    type='text' 
                    placeholder='Deck name' 
                    className='form-control' 
                    required
                />
            </div>
        );
    }

    DeckList() {
        let format = 'EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3'
        return (
            <div className='form-group'>
                <textarea
                    value={this.state.deckList}
                    onChange={this.handleDeckListChange} 
                    className='form-control' 
                    rows='15' 
                    required
                >
                    {format}
                </textarea>
            </div>
        );
    }
}

>Solution :

Use below code it’s working for me

https://codesandbox.io/s/weathered-water-jm1ydv?file=/src/App.js

DeckName()  {
    return (
      <div className="form-group mb-3">
        <input
          value={this?.state.deckName} /* ERROR HERE */
          onChange={this?.handleDeckNameChange}
          type="text"
          placeholder="Deck name"
          className="form-control"
          required
        />
      </div>
    );
  }

  DeckList() {
    let format =
      "EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3";
    return (
      <div className="form-group">
        <textarea
          value={this?.state.deckList}
          onChange={this?.handleDeckListChange}
          className="form-control"
          rows="15"
          required
        >
          {format}
        </textarea>
      </div>
    );
  }