reactjs problem with ref

Hello.
 
I'm having problems when I change a field that together with the flexmonster component
 
For example:
When I type in the "Text to Example" field, the "ref" lose the reference and access to ef.current.flexmonster() generater an erro.
 
The example are atthached

import React from 'react';
import * as FlexmonsterReact from 'react-flexmonster/hooks';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

function PivotTable(props) {

const ref = React.useRef();

const [text, setText] = React.useState("")

const handleChangeText = (event) => {
setText(event.target.value)
}

const handleGetReport = (event) => {
const reportDetails = ref.current.flexmonster().getReport()
console.log(reportDetails)
}

 

const onReportComplete = () => {
console.log(">>>>", ref.current.flexmonster(), ref.current.flexmonster().getReport());
}

return (<div>

<TextField
label="Text To Example"
fullWidth
value={text}
onChange={handleChangeText}
InputLabelProps={{
shrink: true,
}}
/>

<FlexmonsterReact.Pivot
ref={ref}
toolbar={true}
width="100%"
report="https://cdn.flexmonster.com/reports/report.json"
reportcomplete={onReportComplete}
/>

<Button
variant="contained"
color="primary"
onClick={handleGetReport}
>
Execute get data

</Button>

</div>)
}

export default PivotTable;