I am working on setting up google authenticator on React. I want the user to scan the QRcode using their phones to get a temporarily password

Question

I have installed the right packages to create QRCode, but each time i scan the QRCode using my phone, i get the following error "the barcode is not a valid authentication token barcode", I am not too sure what do they mean by token. I've already have a key in my database to pass it as value in QRCode but still not working. Please i need help. the code is below.

import React from 'react';
import Grid from '@material-ui/core/Grid';
import GridItem from 'components/core/Grid/GridItem';
import { Card } from '@material-ui/core';
import CardHeader from 'components/core/Card/CardHeader';
import CardBody from 'components/core/Card/CardBody';
import QRCode from 'react-qr-code';
// import { request, URLs } from '../../request';

// eslint-disable-next-line react/prefer-stateless-function
class GoogleAuthenticationPage extends React.Component {
  render() {
    // eslint-disable-next-line no-empty-pattern
    const {} = this.props;
    return (
      <div>
        <Grid container>
          <GridItem xs={12} sm={12} md={12}>
            <Card>
              <CardHeader
                color="info"
                icon
                title="Google Authentication"
                subtitle="google authenticator"
              />
              <CardBody>
                <Grid container justify="center">
                  <p>Hello</p>
                </Grid>
                <QRCode value="1" size={130} />
              </CardBody>
            </Card>
          </GridItem>
        </Grid>
      </div>
    );
  }
}

export default GoogleAuthenticationPage;