send reference to API and redirect

I need your help to guide me a bit. My goal is to scan products, then retrieve the scanned barcode to manage it with my API using this function:

export async function getProductByRef(reference) {
  const abortController = new AbortController();

  let user_id = await retrieveProfileUserId();
  let lang = await retrieveAppLang();
  let access_token = await renewAccessToken();
  let result = {};

  if (parseInt(reference) > 0 && access_token != '' && parseInt(user_id) > 0) {
    try {
      let response = await fetch(
          API_URL +
          "/products/" + reference +
          "?user_id=" + user_id +
          "&society_id=" + API_SOCIETYID +
          "&access_token=" + access_token +
          "&lang=" + lang,
        {
          method: "GET",
          signal: abortController.signal,
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Bearer " + API_SECRETKEY,
            "Cache-Control": "no-cache, no-store, must-revalidate",
            Pragma: "no-cache",
            Expires: "0"
          }
        }
      )
      .then(response => response.json())
      .then(responseData => {
        if (responseData.status == 200 && responseData.data) {
          console.log("getProductByRef()::success", responseData.data);
          result = responseData.data;
        } else if (
          responseData.status >= 200 && responseData.status <= 404 &&
          responseData.data.error && responseData.data.error.length >= 3
        ) {
          // Handle error
          throw responseData.data.error;
        } else {
          throw "error";
        }
      });
    } catch (error) {
      //console.log(error);
     abortController.abort();
    }
  }
  return await result;
}

and then return the reference to another page called ProductDetails maybe like this:

   onPress={() => this.props.navigation.navigate('ProductDetails', {productRef: parseInt(ref)})}>

I'm not sure how to integrate this into my Product Scan page. Could you help me out, or guide me a bit so I can build my code, I feel a little lost. I'm trying this way but not sure at all... :'(

class Scan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Press: false,
      hasCameraPermission: null,
      reference: '',
      displayArray: []
    };
  }

   initListData = async () => {
    let list = await getProducts(1);
   
    if (list) {
      this.setState({
        displayArray: list,
      });      
    }
  };

  async UNSAFE_componentWillMount() {
    this.initListData();

        if (parseInt(this.state.reference) > 0) {
      
      let product_data = await getProductByRef(this.state.reference);
      console.log(this.state.reference);
        if (product_data && product_data.reference_id && parseInt(product_data.reference_id) > 0) {                
          this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.displayArray.reference)})
        } else {
        this.props.navigation.goBack();
      }
    } else {
      this.props.navigation.goBack();
  }
};

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_Scan = () => {
    this.setState({
      Press: true
    });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ Press: false, scanned: true, lastScannedUrl: data });
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>{i18n.t("scan.request")}</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>{i18n.t("scan.noaccess")}</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "flex-end",
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={{ flex:1, ...StyleSheet.absoluteFillObject}}
        />
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}
        <Button 
        color="#F78400" 
        title= {i18n.t("scan.details")}  
        onPress={() => this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.displayArray.reference)})}>{i18n.t("scan.details")}              
      </Button>     
      </View>
    );
  }
  
  render() {
    const { hasCameraPermission, scanned, Press } = this.state;
    let marker = null;

  console.log('displayArray', this.state.displayArray, 'reference', this.state.displayArray.reference)
    return (
      <View style={{flex:1}}>
        <KeyboardAvoidingView behavior="padding" enabled style={{flex:1}}> 
          <ScrollView contentContainerStyle={{flexGrow: 1}} >
            {Press ? (
              <View style={{flex:1}}>
                {this.renderBarcodeReader()}
              </View>
            ) : (
                <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
               <TouchableOpacity
              onPress={this._onPress_Scan}
              activeOpacity={3}
            >
              <Text style={styles.viewDetails}>Scan BarCode</Text>
            </TouchableOpacity>
             </View>
            )}
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}
export default Scan;