Cypress error during type a value from API request to input

When I try to type OTP code (I get it from API), Cypress shows an error:

cy.get('input[data-placeholder="OTP"]').type(getOtpCode(phoneNumber))

function getOtpCode(phone) {
  var otpCode;
  cy.request({
    method: 'GET',
    url: 'url'
  }).then(resp => resp.body)
    .then(data => data.find(element => element['body']['Message']['Phone'] == phone))
    .then(phone => otpCode = phone['body']['Message']['CustomMessage']);
  return otpCode;
}

If I typed a random string instead of getOtpCode(), it's working. Do you know how to resolve that problem?

For the function do this:

cy.get('input[data-placeholder="OTP"]')
  .should('be.visible')
  .type(getOtpCode(phoneNumber))

function getOtpCode(phone) {
  var otpCode
  cy.request({
    method: 'GET',
    url: 'url',
  })
    .then((resp) => resp.body)
    .then((data) =>
      data.find((element) => element['body']['Message']['Phone'] == phone)
    )
    .then((phone) => (otpCode = phone['body']['Message']['CustomMessage']))
  return cy.wrap(otpCode)
}

In your test file do this:

import className from '../path-to-js-file.js' //replace className with yours
const obj = new className() //replace className with yours

describe('Test Suite', () => {
  it('Test Case', () => {
    obj.getOtpCode(phone).then((otp) => {
      cy.get('input[data-placeholder="OTP"]').type(otp)
    })
  })
})