react-jsonschema-forms validator error - Cannot read properties of undefined (reading 'replace')

Question

I'm trying to build dynamic forms using rjsf and having some issues with the validator.

The error message is applicable to any validation type attempt i.e. if a field is required or minLenght check.

If I disable noHtml5Validate={false} then I get a pop up telling me to populate required field. My goal is to display all errors and highlight relevant inputs in red.

This corresponds to this line in the code:

var property = instancePath.replace(/\//g, ".");

My schema is:

const testSchema = {
    "type": "object",
    "required": [
        "account",
    ],
    "properties": {
        "reference": {
            "type": "string",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
            "nullable": true,
        },
        "account": {
            "type": "integer",
            "format": "int64",
            "pattern":"^(0|[1-9][0-9]*)$",
        }
    },

    "additionalProperties": false
};

import Form from "@rjsf/bootstrap-4";
import validator from "@rjsf/validator-ajv8";

return <>
    { schema && <Form 
        schema={testSchema}
        uiSchema={uiSchema}
        validator={validator}
        onSubmit={onSubmit}
        noHtml5Validate={true}
        formData={formData}
        onChange={(e)=> onChangeHandler(e.formData)}
    />}</>;

What is more confusing is that when I set up a new test app using npx create app and use the same settings it works just fine so I'm really unsure to resolve this issue. I've already spent 3 days searching for a solution