Får fel färger på mina components i React när jag lägger till dem i en array

import React, { Component } from 'react';
import { Container, Row, Button, Col, ProgressBar, Modal } from 'react-bootstrap';
import './Multiplication.css'

export default class Multiplication extends Component {

state = {
    numberOne: null,
    numberTwo: null,
    numberToCheck: null,
    correct: null,
    correctAnswer: 0,
    wrongAnswer: 0,
    answered: 0,
    modalShow: false,
    checkIt: true,
    start: false,
    answers: []
  }

  generateNumbers = () => {
    const one = Math.floor(Math.random() * 13);
    const two = Math.floor(Math.random() * 13);

    this.setState({numberOne: one, numberTwo: two, start: true, checkIt: false });
  }

  checkAnswer = () => {

    const numberToCheck = parseInt(document.getElementById("answer").value, 10);
    const { numberOne, numberTwo} = this.state;
    const isCorrect = (numberOne * numberTwo) === numberToCheck;

    isCorrect ? this.setState({ correctAnswer: this.state.correctAnswer + 1, correct: true }) : this.setState({ wrongAnswer: this.state.wrongAnswer + 1, correct: false });

    this.state.answers.push(<Answer isCorrectAnswer={ this.state.correct } numberOne={ this.state.numberOne } numberTwo={ this.state.numberTwo }/>);

    this.setState({ answers: answers });
    
    document.getElementById("answer").value = "";
    document.getElementById("checker").innerHTML = isCorrect;
    
    this.setState({ answered: this.state.answered + 1 });

    if (this.state.answered === 9) {
      this.setState({modalShow: true });
    }
    
    this.generateNumbers();
  }

  render() {

    let modalClose = () => 
    this.setState({ modalShow: false, correctAnswer: 0, wrongAnswer: 0, numberOne: null, numberTwo: null, answered: null, start: false, checkIt: true, answers: []});
      
      return (
        <Container>
          <Col xs={12}>
            <Row className="justify-content-center">
              <Button 
              id="start" 
              disabled={ this.state.start }
              onClick={ this.generateNumbers }>Start</Button>  
            </Row>
          </Col>
            <Row className="justify-content-center">
                <h1 id="numberOne">{ this.state.numberOne }</h1>
                <h1>&nbsp;x&nbsp;</h1>
                <h1 id="numberTwo">{ this.state.numberTwo }</h1>
            </Row>
            <Row className="justify-content-center">
                <input id="answer" type="number" />
            </Row>
            <Row className="justify-content-center">
                <Button 
                id="check" 
                disabled={ this.state.checkIt }
                onClick={ this.checkAnswer }>Check</Button>
            </Row>
            <Row className="justify-content-center">
                <p>{ this.state.wrongOrRight }</p>
            </Row>
            <Row className="justify-content-center m-2">
            <ProgressBar max="10">
              <ProgressBar max="10" striped variant="success" animated now={ this.state.correctAnswer } key={1} />
              <ProgressBar max="10" striped variant="danger" animated now={ this.state.wrongAnswer } key={2} />
            </ProgressBar>
            </Row>
            <Row className="justify-content-center">
            <p id="checker"></p>
            </Row>
            <Modal
          size="sm"
          show={ this.state.modalShow }
          onHide={ modalClose }
        >
          <Modal.Header closeButton>
            <Modal.Title>
              Your score
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Correct Answers: { this.state.correctAnswer }</p>
            <p>Wrong Answers: { this.state.wrongAnswer }</p>
            <ul>
            { this.state.answers.map( (tag, index) => <li key={index}>{tag}</li>)}
            </ul>
          </Modal.Body>
        </Modal>
          </Container>
              
      );
  }
}

const Answer = props => ( <div style={{color: `${props.isCorrectAnswer ? 'green' : 'red'}`}}>{props.numberOne} x {props.numberTwo} = {props.numberOne * props.numberTwo}</div>);