Uncaught TypeError: Cannot assign to read only property 'checkGuess' of object '#<Object>'. how do I fix this?

Question

Im trying to send the form input data to a different component and keep recieving the error 'Uncaught TypeError: Cannot assign to read only property 'checkGuess' of object '#'' I am trying to send input form data from my NameForm.js file to the checkGuess function inside of FLashcard.js file. The form is rendered in my app.js file. Can anyone help me? here is the code for my NameForm.js file:

import React from "react"
import Flashcard from "./Flashcard";
import flashcard from "./Flashcard";
import CheckGuess from './Flashcard'

export default class NameForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {username: ''};   
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange = (event) => {
    this.setState({username: event.target.value});

}

handleSubmit = (event) => {  
    event.preventDefault();
    alert('A name was submitted: ' + this.state.username);
    this.props.checkGuess = new NameForm(this.props.answer, this.state.username);
    // console.log(this.state.value)
}
checkGuess() {

}


render() {
  const username = this.state.username
  return (
      <div>
        <form onSubmit={this.handleSubmit}>
            <label>
                Name:
                <input type="text" value={username} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
            
        </form>
      </div>
  );
  }
}

here is the code for my checkGuess function which is where i want to lift the data to, the checkguess function posts the data to the backend. the checkguess function is located inside my flashcard.js file. Heres the code for the checkGuess function:

        try {
            console.log(username)
            let result = fetch('http://127.0.0.1:5000/post', {
                method: 'POST',
                mode: 'no-cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
  
                },
                body: JSON.stringify({
                    key: `${Date.now()}`,
                    question: flashcard.question,
                    answer: flashcard.answer,
                    options: flashcard.options,
                    guess: answer,
                    user: username
                })
            });
        } catch(e) {
            console.log(e)
        }
        if (answer === flashcard.answer) {
            setFlip(true)
            return
        }
        if (guess + 1 === MAX_TRIES) {
            setFlip(true)
        }

        setGuess(guess + 1)
        // setIncorrect(true)
    } ```

and then here is where i render my NameForm, it is inside my app.js component which is the parent component:

``` return (
        
           <div>
               <NameForm answer={answer} checkGuess={username} />
                
                <div className="container">
                    <FlashcardList flashcards={flashcards} />
                </div>
            </div>
    )
}

i am really stuck I'm not sure what Im doin wrong