I have been struggling with this error AxiosError {message: 'Request failed with status code 405'..., but in my page.ts, I am specifying sending by POST and I am managing the post method in my api/register/, however I only get this error, I am on localhost

This is my page.ts:

const register = useCallback(async () => {
        
        try {
            await axios.post('../api/register', {
                email,
                name,
                password
            });

        } catch (error) {
            console.log(error);
        }

    }, [email, name, password]);

and this is my api:

import bcrypt from 'bcrypt'
import { NextApiRequest, NextApiResponse } from 'next'
import prismadb from '@/lib/prismadb'

export default async function handlerPost(req: NextApiRequest, res: NextApiResponse) {

    try {
        if (req.method === 'POST') {
            const { email, name, password } = req.body;

            console.log(`/api/register. Datos: email=${email}, name=${name}, password=${password}`);

            const existingUser = await prismadb.user.findUnique({
                where: {
                    email
                }
            })

            if (existingUser) {
                return res.status(422).json({ error: 'Existing Email' });
            }

            const hashedPassword = await bcrypt.hash(password, 12);

            const user = await prismadb.user.create({
                data: {
                    email,
                    name,
                    hashedPassword,
                    image: '',
                    emailVerified: new Date(),
                }
            })

            return res.status(200).json(user);
        } else {
            return res.status(405).end();
        }
    } catch (error) {
        return res.status(400).json({ error: `Something went wrong: ${error}` });
    }
}

im working in the app directory
app/auth and app/api/register