how to fix Next.js .env request wrong url

I want to make a post method on API but when I call the function it posts to the wrong path of API.

how can i fix it?

// config/index.js
export const NEXT_PUBLIC_API_ROOT = process.env.NEXT_PUBLIC_API_ROOT;

//pages/auth/signup.js
 const EmailValidRequest = async () => {
    try {
      await axios
        .post(`${NEXT_PUBLIC_API_ROOT}/auth/mailverification`, {
          email: InputValue.email,
        })
        .then((res) => {
          if (res.data.message === "Check Email.") {
            SetMailMessage({ ...MailMessage, email: res.data.message });
          } else {
            SetMailMessage({ ...MailMessage, email: res.data.message });
          }
        });
    } catch (err) {
      console.log(err);
    }
  };

// Request URL
https://www.test.com/auth/undefined/auth/mailverification

/auth/signup/auth/emailverification

I guess Request URL undefined is signup

why is it repeat and how can i fix this problem?

if i don't use .env, just input string like localhost:4000/auth/emailverification it's working!