Problema em consumir um API no frontEnd

Front-end JavaScript
#1

Olá estou com um problema que está me deixando confuso:
meu front end:

> import React, { Component } from 'react';
> import {Form,FormGroup, Label, Input, Button, Alert} from 'reactstrap';
> import Header from '../../components/header';
> 
> export default class Login extends Component {
> 
>     constructor(){
>         super()
>         this.state = {
>             message: '',
>         }
>     }
> 
>     signIn = () => {
>         const data = {login:this.login,password:this.password};
>         console.log(data);
> 
>         const requestInfo = {
>             method:'POST',
>             body: JSON.stringify({data}),
>             headers: new Headers({
>                 'Content-Type': 'application/json'
>             }),
>         };
>         fetch('http://localhost:9000/login', requestInfo)
>         .then(response => {
>             if(response.ok){
>                 return response.json();
>             }
>             throw new Error("Login Invalido..")
>         })
>         .then(token => console.log(token))
>         .catch(e => 
>             this.setState({message: e.message})
>             );
>     }
> 
>     render(){
>         return(
>             <div className="col-md-6">
>                 <Header title="ReactJS Login"/>
>                 <hr className="my-3"/>
>                 {
>                     this.state.message !== ''? (
>                     <Alert color="danger" className ="text-center"> {this.state.message}</Alert>
>                     ) : ''
>                 }
>                 <Form>
>                     <FormGroup>
>                         <Label for="login">Login</Label>
>                         <Input type="text" id="login" onChange={e => this.login = e.target.value } placeholder="Informe seu login" />
>                     </FormGroup>
>                     <FormGroup>
>                         <Label for="password">Senha</Label>
>                         <Input type="text" id="password" onChange={e => this.password = e.target.value }  placeholder="Informe sua senha"/>
>                     </FormGroup>
>                     <Button color="primary" black onClick={this.signIn}> Entrar </Button>
>                 </Form>
>             </div>
>         );
>     }
> }

ele chega no meu backend entra no meu metodo de senha e jwt

   async signin(data){
        console.log("entrou em signin");
        const response = {
            login:{
                id:null,
                isValid: false,
                message: "Login inválido"
            }
        };
        console.log("entrou em datalogin e password");
        console.log(data);
        console.log(data.login);
        if(data.login && data.password){

            const login = data.login;
            const password = data.password;
            
            try {
                const result = await this.Users.findOne({where:{ login }})
                const user = await result;
                if(user){
                    const correctPassword = await this.Users.isPassword(user.password, password)
                    console.log('Verificação da Senha - > ' + correctPassword);
                    if(correctPassword){
                        response.login.id = user.id;
                        response.login.isValid = correctPassword;
                        response.login.message = "Logado com sucesso";
                        return response;            
                    }
                }
            } catch (error) {
                console.error(error);
            }
        }
        return response;
    }

mas dando console.log no que vem no meu front-end:
{ data: { login: ‘xdxd’, password: ‘xdxd’ } }

mas quando eu pego

    console.log(data.login);

fica undefined

não faço ideia do motivo.