validate and convert input string in react

I have one form in react in which I have used formik and Yup library for validations. I have requirement that input field should allow only lowercase alphanumeric values which allow hyphen and length between 2 to 30 characters. Also if user is typing Uppercase letters or space then convert that string to lowercase and replace space with hyphen.
e.g. for input like “Shop name123” should convert to “shop-name123”

formik validation is as follows:

postfix: Yup.string()
                  .required(message.ENTER_POSTFIX)
                  .matches(new RegExp("^[a-z0-9- ]{2,30}$"), {
                    message: message.PUBLIC_URL_POSTFIX_INVALID,
                  })

on change of that field I have following code

<Field
                          type="text"
                          className="form-control"
                          style={{ marginTop: "32px" }}
                          value={values.postfix? values.postfix: ""}
                          name="postfix"
                          onChange={(e) => {
                            setFieldValue(
                              "postfix",
                              tranformStrToVar(e.target.value)
                            );
                          }}
                        />

method tranformStrToVar as follows

export function tranformStrToVar(str) {
  let newStr = "";
  if (str) {
    newStr = str.replace(/s+/g, "-").toLowerCase();
    newStr.match(/[^/]+/g).join("-");
  }
  return newStr;
}

With above code working for some cases and getting failed if input has only “—–” etc. That also should not allowed.

How should I validate and convert input at same time and get valid, required input having lowercase alphanumeric seperated by hyphen having character length between 2 to 30 ?

Please help and guide. Thanks