Build calendar with React

I have a question on how to analyze the number of days a month for a given calendar, I have to set up a "nav" with the weekly days of each month, but the problem is when I arrive on the last day of the month, adds to 32,33,34 ... I would like some tips to be able to validate by month.

import React, { Component } from 'react'
import './index.css'
import Icon from './../icone/'

const diaAtual = new Date()

const last = first + 6
const segunda = new Date(diaAtual.setDate(first + 1))
const quarta = new Date(diaAtual.setDate(first + 3));
const sexta = new Date(diaAtual.setDate(last - 1));

class BarraNavegacao extends Component {
  constructor(props) {
    super(props);
    this.state = {
      segunda: segunda.getDate(),
      quarta: quarta,
      sextaDia: sexta.getDate(),
      sextaAno: sexta.getFullYear(),
      getMonth: ''
    }
  }

componentWillMount(){
    this.returnMonth(sexta.getMonth())
  }

  acao = (event) => {
    const target = event.currentTarget;
    const targetID = target.id;
    if (targetID === 'arrowLeft') {
      const diaProximo = this.state.segunda - 6
      const diaFinal = diaProximo + 6
      this.setState({
        segunda: diaProximo - 1,
        sextaDia: diaFinal - 3
      })
    } else {
      const diaProximo = this.state.segunda + 6
      const diaFinal = diaProximo + 6
      this.setState({
        segunda: diaProximo + 1,
        sextaDia: diaFinal - 1
      })
    }
  }

  returnMonth(mes){
    if (mes === 0) {
      this.setState({getMonth: "Janeiro"})
    } else if (mes === 1) {
      this.setState({getMonth: "Fevereiro"})
    } else if (mes === 2) {
      this.setState({getMonth: "Março"})
    } else if (mes === 3) {
      this.setState({getMonth: "Abril"})
    } else if (mes === 4) {
      this.setState({getMonth: "Maio"})
    } else if (mes === 5) {
      this.setState({getMonth: "Junho"})
    } else if (mes === 6) {
      this.setState({getMonth: "Julho"})
    } else if (mes === 7) {
      this.setState({getMonth: "Agosto"})
    } else if (mes === 8) {
      this.setState({getMonth: "Setembro"})
    } else if (mes === 9) {
      this.setState({getMonth: "Outubro"})
    } else if (mes === 10) {
      this.setState({getMonth: "Novembro"})
    } else if (mes === 11) {
      this.setState({getMonth: "Dezembro"})
    }
  }

  render() {
      return (
      <nav className="secondBar">
        <div className="navBarLeft">
          <div id="arrowLeft" onClick={this.acao}>
            <Icon style='material-icons cheLeft'>chevron_left</Icon>
          </div>
          <a href="#"className="weekDate">
          <span>{this.state.segunda} - </span>
          <span>{'${this.state.sextaDia} de ${this.state.getMonth} de ${this.state.sextaAno}'}</span></a>
          <div id="arrowRight" onClick={this.acao}>
            <Icon style='material-icons cheRight'>chevron_right</Icon>
          </div>
        </div>
        <div className="navBarRight">
          <div className="cardSession">
            <Icon style='material-icons lensDis'>lens</Icon>
            <span className="status">disponivel</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensInd'>lens</Icon>
            <span className="status">indisponivel</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensPro'>lens</Icon>
            <span className="status">próxima sessão</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensEnc'>lens</Icon>
            <span className="status">sessão encerrada</span>
          </div>
        </div>
      </nav>
    )
  }
}
export default BarraNavegacao

Navigation month July:

Navigationnextweek:

This is where I have to validate next month ...