Checkbox on edit page in React JS always in checked state?

Question

React

When developing an admin panel on React JS in Laravel, I ran into a problem. When creating and editing data, they are saved to the database, but the checkbox itself, regardless of the data received from the status field (from where the value should be taken), the checkbox is displayed in the checked state. At the same time, the render takes a normal position in the code when checked = true and checked = false, and also saves them.

Here is the code:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class BattleEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            battle: '',
            status: !("")  ? 1 : 0,
            checked: !("")  ? 1 : 0,
        };
        // bind
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    // handle change
    handleChange(e) {
        this.setState({
            name: e.target.value
        });
        console.log('onChange', this.state.name);
    }
    handleClick(e) {
        const { target } = e;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const { name } = target;

        this.setState({
            checked: value
        });
        console.log('onClick', value ? 1 : 0);
    }
    // create handleSubmit method right after handleChange method
    handleSubmit(e) {
        // stop browser's default behaviour of reloading on form submit
        e.preventDefault();
        axios
            .put(`/admin/json/battles/${this.props.match.params.id}`, {
                name: this.state.name,
                status: this.state.checked ? 1 : 0
            })
            .then(response => {
                console.log('successfully edited the task');
                this.props.history.push('/');
            });
    }
    // get all tasks from backend
    getBattles() {
        axios.get(`/admin/json/battles/${this.props.match.params.id}/edit`).then((
            response // console.log(response.data.battles)
        ) =>
            this.setState({
                battle: response.data.battle,
                name: response.data.battle.name,
                status: response.data.battle.status
            })
        );
    }
    // lifecycle method
    componentWillMount() {
        this.getBattles();
    }

    render() {
        console.log(this.props.match.params.id);
        return (
                    <div className="col-md-12">
                        <div className="card">
                            <div className="card-header">Edit Battle</div>
                            <div className="card-body">
                                <form onSubmit={this.handleSubmit}>
                                    <div className="form-group">
                                        <input
                                            type="text"
                                            onChange={this.handleChange}
                                            value={this.state.name}
                                            className="form-control"
                                            required
                                        />
                                    </div>
                                    <div className="form-check">
                                        <input type="checkbox"
                                            className="form-check-input"
                                            name="status"
                                            defaultChecked={this.state.checked ? 1 : 0}
                                            onClick={this.handleClick}
                                            value={this.state.checked ? 1 : 0}
                                        />
                                        <label className="form-check-label">
                                            Active
                                        </label>
                                    </div>
                                    <button type="submit" className="btn btn-primary">
                                        Edit Battle
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
        );
    }
}

export default BattleEdit;

If you substitute 0 or 1 for this.state.checked in the constructor, then after the rebuild, the checkmark takes on the desired value. How can I get the value from the status field and insert it there? Or is there some other way to write this value to the DOM?