How should I implement CSRF tokens in form submitting POST requests, rendered in React

Question

I'm using React to build a component which renders a form.

Once the submit button is clicked, this kicks off a POST request using fetch to the backend (Django) which will include the text in the form.

// The 'Newpost' component
class Newpost extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
        this.handleClick = this.handleClick.bind(this);
    }

    // Execute this when button is clicked
    handleClick() {
        const request = new Request(
        'https://apjackson20-code50-112112529-76x5j94r47x2pgxr-8000.preview.app.github.dev/',
        {headers: {'X-CSRFToken': csrftoken}}
    );
    fetch(request, {
        method: 'POST',
        mode: 'same-origin'  // Do not send CSRF token to another domain.
    }).then(function(response) {
        // ...
    });
}

    // This is the HTML to be rendered on the page
    render() {
        return (
            <React.Fragment>
                <p class="h3 m-3">All Posts</p>
                <div class="container p-3 border">
                    <p class="h4 mt-1">New Post</p>
                        <div class="input-group">
                            <form method="post" id="newpost" class="container p-0" >
                                <textarea class="form-control" aria-label="With textarea"></textarea>
                            </form>
                        </div>
                    <button type="submit" form="newpost" onClick={this.handleClick} type="button" id="newpostsubmit" class="btn btn-primary mt-2">Post</button>
                </div>
            </React.Fragment>
            );
        }
    }

ReactDOM.render(<Newpost />, document.querySelector("#newpost"))

The problem is every time the form submits, I get back the following error:

Forbidden (Origin checking failed - https://apjackson20-code50-112112529-76x5j94r47x2pgxr-8000.preview.app.github.dev does not match any trusted origins.): /

Normally I would place the {% csrf_token %} in the form but since React is rendering the form I don't think that's an option here.

I've seen different solutions to this across the web and have tried each one of them and went with the one where you include a JavaScript function to get the CSRF Token cookie value and then plug it into the fetch request.

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var csrftoken = getCookie('csrftoken')

But none of them seem to work (or I might be applying them incorrectly).