When using ajv-errors package I get this error "Cannot read property 'allErrors' of undefined"

Hi I am trying to use this ajv-errors package with react and typescript but I keep getting this error even though allErrors is set true? my code is as follows:

`import Ajv, { JSONSchemaType } from 'ajv'
import addFormats from 'ajv-formats'
import ajvErrors from 'ajv-errors'

const ajv = new Ajv({ allErrors: true, $data: true })

ajvErrors(addFormats(ajv))

export const emailSchema: JSONSchemaType = {
type: 'string',
minLength: 1,
format: 'email',
errorMessage: 'test',
}

export const passwordSchema: JSONSchemaType = {
type: 'string',
minLength: 12,
maxLength: 100,
pattern: '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\\W)',
errorMessage: 'test',
}

export const recaptchaTockenSchema: JSONSchemaType = {
type: 'string',
minLength: 1,
errorMessage: 'test',
}

const passwordValidator = ajv.compile(passwordSchema)
const emailValidator = ajv.compile(emailSchema)

export const validatePassword = (value: string) => {
return {
isValid: passwordValidator(value),
error: passwordValidator.errors ? passwordValidator.errors[0]?.message : '',
}
}

export const validateEmail = (value: string) => {
return {
isValid: emailValidator(value),
error: emailValidator.errors ? emailValidator.errors[0]?.message : '',
}
}`