Boa tarde pessoal, estou fazendo um projeto de CRUD usando ReactJS, porém, estou com um problema em uma variável e não estou entendendo o porque ?

Segue o código a baixo.

import React, {Component} from 'react';
import './App.css';
import { act } from 'react-dom/test-utils';
//import api from './api';

class App extends Component{

  constructor(props){
    super(props);
    this.state={
      title:'Desafio CRUD Leste Telecom',
      act: 0,
      index:'',
      datas:[]
    }
  }

  componentDidMount(){
    this.refs.name.focus();
  }

  fSubmit = (e) =>{
    e.preventDefault();
    console.log('clicou')

    let datas = this.state.datas;
    let nome = this.refs.name.value;
    let sobrenome = this.refs.sobrenome.value;
    let email = this.refs.email.value;
    let masculino = this.refs.masculino.value;
    let feminino = this.refs.feminino.value;
    let idioma = this.refs.idioma.value;
    let dataAniv = this.refs.dataAniv.value;

    if(this.state.act === 0){
      let data = {
        nome, sobrenome,email,masculino,feminino,idioma,dataAniv
      }
      datas.push(data);
    }else{
      let index = this.state.index;
      datas[index].nome = nome;
      datas[index].sobrenome = sobrenome;
      datas[index].email = email;
      datas[index].masculino = masculino;
      datas[index].feminino = feminino;
      datas[index].idioma = idioma;
      datas[index].dataAniv = dataAniv;
    }

    this.setState({
      datas: datas,
      act: 0
    });

    this.refs.myForm.reset();
    this.refs.name.focus();

  }

  fRemove = (i) =>{
    let datas = this.state.datas;
    data.splice(i,1);
    this.setState({
      datas: datas
    });

    this.refs.myForm.reset();
    this.refs.name.focus();
  }
  fEdit = (i) =>{
    let data = this.state.datas[i];
    this.refs.nome.value = data.name;
    this.refs.sobrenome.value = data.sobrenome;
    this.refs.email.value = data.email;
    this.refs.masculino.value = data.masculino;
    this.refs.feminino.value = data.feminino;
    this.refs.idioma.value = data.idioma;
    this.refs.dataAniv.value = data.dataAniv;

    this.setState({
      act:1,
      index: i
    });
  }

  render(){
    let datas = this.state.datas;
    return(
      <div className="App">

    <h2>{this.state.title}</h2>

    <form ref="myForm" className="myForm">
        <input type="text" ref="nome" placeholder="Digite seu nome" className="formField"/>
        <input type="text" ref="sobrenome" placeholder="Digite seu sobrenome" className="formField"/>
        <input type="text" ref="email" placeholder="Digite seu E-mail" className="formField"/>
        <input type="radio" value="masculino" name="gender"/> Masculino
        <input type="radio" value="feminino" name="gender"/> Feminino
        <input type="text" ref="idioma" placeholder="Digite seu idioma" className="formField"/>
        <input type="date" ref="dataAniv" placeholder="Digite a data do seu aniversario" className="formField"/>
        <button onClick={(e)=>this.fSubmit(e)} className="myButton">Enviar</button>
    </form>

    <pre>
      {datas.map((data, i) =>
      <li key={i} className="myList">

        {i+1}. {data.nome}, {data.sobrenome}, {data.email}, {data.masculino}, {data.feminino}, {data.idioma},{data.dataAniv}
        <button onClick={()=>this.fRemove(i)} className="myListButton">Remover</button>
        <button onClick={()=>this.fEdit(i)} className="myListButton">Editar</button>


      </li>
      )}
    </pre>

      </div>
    );
  }

}

export default App;

O problema que está sendo apresentado e este;

./src/App.js Line 63:5: 'data' is not defined no-undef

Search for the keywords to learn more about each error.