Next.js - React Custom Hook throws Invalid hook call

Question

Hi I am quite new to react and this is for a learning project. In react under next.js want to check for the existence of a certain folder on the server. To achieve that I implemented an api twigExists.js in pages/api and a custom hook twigExistsRequest.js in the library folder:

import {useEffect, useRef} from "react";
import {webApiUrl} from "@/library/webHelpers";

export function useTwigExistsRequest({
    parentDirSegment,
    name,
    action,
    treeStateDispatch
}) {
    const nameExists = useRef('not');
    useEffect(() => {
        if ('' !== name) {
            async function fetchNameValidation() {
                try {
                    const response = await fetch(
                        webApiUrl() + '/branchName',
                        {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({parentDirSegment, name})
                        }
                    );
                    const answer = await response.json();
                    if (undefined !== answer['exists']) {
                        nameExists.current = answer['exists'];
                    }
                    else if (undefined !== answer['err']) {
                        console.log(answer['err']);
                    }
                } catch (err) {
                    console.log(err);
                }
            }
            fetchNameValidation().then(() => {
                nameExists.current === 'exists'
                && treeStateDispatch({
                    action,
                    name,
                    dirSegment: parentDirSegment
                });
            })
        }
    });
}

The following error is thrown at the useRef line, line 10:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I am using an almost identical approach to get the structure of a special folder with its subfolders and it is working fine. Working example:

import {useEffect, useRef} from "react";
import {webApiUrl} from "@/library/webHelpers";

export default function useChangeBranchRequest({
   data,
   setData
}) {
    let postData;
    const storeEffect = useRef(0);
    if ('skip' !== data) {
        storeEffect.current += 1;
        postData = JSON.stringify(data);
    }
    useEffect(() => {
        if (0 !== storeEffect.current) {
            async function fetchData() {
                try {
                    const response = await fetch(
                  webApiUrl() + '/changeBranch',
                    {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: postData
                        });
                    const json = await response.json();
                    setData(JSON.parse(json['tree']));
                } catch (error) {
                    console.log(error);
                }
            }
            fetchData()
                .then(() => {
                return (<></>);
            });
        }
    }, [storeEffect.current]);
}

I can't see: What is wrong in the first example??

Edit due to question: useTwigExistsRequest is called from this file:

import {useTwigExistsRequest} from "@/library/twigExistsRequest";
    
    export default function twigExistsHandler({
        parentDirSegment,
        name,
        action,
        treeStateDispatch
    }) {
    
        useTwigExistsRequest({
            parentDirSegment,
            action,
            name,
            treeStateDispatch
        });
    
    }

trying to avoid a direct call from:

import {ACTIONS} from "@/library/common";
import {useState} from "react";
import twigExistsHandler from "@/library/twigExistsHandler";

export default function PlgButton({dirSegment, action, text, treeStateDispatch}) {

    const [info, SetInfo] = useState('');
    const [parentDirSegment, SetParentDirSegment] = useState('');

    // name validation, triggered by SetInfo. Returns strings 'false' or 'true':


    // reset Button after execution
    if (info) SetInfo('');

    return (
      <button
          className="btn btn-secondary btn-sm new-plg-btn"
          onClick={() => {
              clickHandler(action);
          }}
      >
          {text}
      </button>
    );

    function clickHandler(action) {
        let name;
        switch (action) {
            case ACTIONS.add:
                name = window.prompt('New name:');
                twigExistsHandler({
                    parentDirSegment: dirSegment,
                    name,
                    action,
                    treeStateDispatch
                });
                break;

            case ACTIONS.dup:
                name = window.prompt('Dup name:');
                twigExistsHandler({
                    parentDirSegment: dirSegment.slice(0,dirSegment.lastIndexOf('/')),
                    name,
                    action,
                    treeStateDispatch
                });
                break;

            case ACTIONS.del:
                window.confirm('Irrevocably delete the whole playground?')
                && treeStateDispatch({
                    info: '',
                    dirSegment,
                    action
                });
                break;
        }
    }
}