Неопределенное нарушение инварианта: целевой контейнер не является элементом DOM. Я тоже добавил в файл просмотра

Question

У меня есть React код, который содержит основную кнопку. Я хочу показать это в laravel's файле блейда. Поэтому я сделал следующее:

Файл: dashboard.js

import React, { Component } from 'react';
class Dashboard extends Component {
    render() {
        return(
            <div>
                <button type = "button" onClick = {this.SigninWithGoogle}>Sigin With google</button>
            </div>
        )
    }
}
export default Dashboard;

if (document.getElementById('Dashboard')) {
    ReactDOM.render(<Dashboard />, document.getElementById('Dashboard'));
}

и мой блейд-файл:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>

                <div class="card-body">

                        <div class = "Register" id = "Dashboard">
                        </div>
                        <script type = "text/javascript" src = "js/App.js"></script>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Я могу просмотреть кнопку на странице просмотра, но в консоли появляется следующая ошибка.

Неизученное нарушение инварианта: целевой контейнер не является элементом DOM.

Может кто-нибудь сказать мне, в чем проблема с этим кодом?