react-chartjs-2 change axes text color

I did a lot of searching but nothing I tried works to change the axes text color. However, I am able to change the grid color to white in scales.yAxes.grid.color. This is what I have right now:

  render(){
        return (
            <div className = "chart">
                <Line
                    data = {this.state.chartData}

                    options= {{
                        maintainAspectRatio: false,
                        scales: {
                            yAxes:{
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                            xAxes: {
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                        }
                    }}
                    width = {20}
                    height = {200}
                />
            </div>
        )
    }
}

font color can be set by "color" instead of "fontColor"

render(){
        return (
            <div className = "chart">
                <Line
                    data = {this.state.chartData}

                    options= {{
                        maintainAspectRatio: false,
                        scales: {
                            yAxes:{
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    color: 'white',
                                    fontSize: 12,
                                }
                            },
                            xAxes: {
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    color: 'white',
                                    fontSize: 12,
                                }
                            },
                        }
                    }}
                    width = {20}
                    height = {200}
                />
            </div>
        )
    }
}