Problems with my React js battleship game

I'd like my battleship game to end right after running out of bombs or hitting all the 3 ships. Right now if I hit all 3 ships, I still have to press somewhere for the if statement to confirm all 3 ships are sunk.

This is my function to draw the item on the board based on wether the ship is there or not.

    drawItem(number) {
    if (this.state.status === 'Game has not started.') {
        this.setState({ status: 'Click the start button first...' });
    } else if (board[number] === START && this.state.status === 'Game is on...') {
        board[number] = CROSS;
        this.setState(state => ({ bombs: state.bombs - 1 }));
    }
    else if (board[number] === SHIP && this.state.status === 'Game is on...') {
        board[number] = CIRCLE;
        this.setState(state => ({ bombs: state.bombs - 1 }));
        this.setState(state => ({ hits: state.hits + 1 }));
        this.setState(state => ({ ships: state.ships - 1 }));
    }

    if (this.state.status === 'Game is on...' && this.state.bombs === 0) {
        this.setState({ status: 'Game Over. Ships remaining.' });
        clearInterval(this.interval);
    }
    else if (this.state.hits === 3) {
        this.setState({ status: 'You sinked all ships.' });
        clearInterval(this.interval);
    }
}