Invalid hook call. React js

Good afternoon. I’m trying to create my website using react. I’m rally new to react and js in general, so I have a problem. I wrote some registration logic, but it shows me that error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Here’s my code:

Register.jsx

import React from 'react';
import ReactDOM, {render} from "react-dom";
import '../../styles/Register.css';
import {Link} from "react-router-dom";
// import register from "./AuthMethods"
import Reg from "./AuthMethods";

function Register() {
    return (
        <div className="Register">
            <div id = "block_reg">
                <div id = "reg_top">Register</div>
                <input id = "nickname_input" placeholder="Nickname"/>
                <input id = "name_input" placeholder="Name"/>
                <input id = "surname_input" placeholder="Surname"/>
                <input id = "mail_input" placeholder="Email"/>
                <input type = "password" id = "password_input" placeholder="Password"/>
                <input type = "password" id = "password-repeat_input" placeholder="Repeat password"/>
                <button onClick={Reg} id = "reg_but"> Register</button>
                <div id = "alredy-has_div">Already have account?</div>
                <Link to="/" id = "already-has_but">Sign in!</Link>
            </div>
        </div>
    );
}

export default Register;

AuthMethods.jsx

import url from "../../configs"
import {Link, useNavigate} from "react-router-dom";

function Reg() {
    const navigate = useNavigate();
    var nickname = document.getElementById("nickname_input").value;
    var name = document.getElementById("name_input").value;
    var surname = document.getElementById("surname_input").value;
    var email = document.getElementById("mail_input").value;
    var password = document.getElementById("password_input").value;
    var repeatPassword = document.getElementById("nickname_input").value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://127.0.0.1:8000/api/register", false);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        nickname: nickname,
        email: email,
        name: name,
        surname: surname,
        password: password
    }));

    if(xhr.status === 200) {
        navigate('/');
    } else if(xhr.status === 403) {
        alert("You cant use such nickname");
    } else {
        alert("Something went wrong");
    }

}

export default Reg;

If you know what can be the problem, please tell me. I’d really apreciate it!