React POST/DELETE with useEffect & useState

import { useEffect, useState } from "react"

export default function App() {
    const [data, setData] = useState(null);
    const [title, setTitle] = useState('');
    const [desc, setDesc] = useState('');
    const [category, setCategory] = useState('');
    const [shouldFetch, setShouldFetch] = useState(false);
    const body = { title, desc, category };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const response = await fetch('https://crudapi.co.uk/api/v1/servers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer s7O03_9dOLr4OsDUvnr9ncxfSt5ETbHW3saBVJxFMCJsMAq2bg'
            },
            body: JSON.stringify([body])
        })
        const result = await response.json();
        console.log('regiser successfully');
        document.querySelectorAll('input').forEach(curr => curr.value = '');

        setShouldFetch(true);
    }

    const handleDelete = async (e) => {
        try {
            const response = await fetch('https://crudapi.co.uk/api/v1/servers', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer s7O03_9dOLr4OsDUvnr9ncxfSt5ETbHW3saBVJxFMCJsMAq2bg'
                },
                body: JSON.stringify([{ "_uuid": `${e.currentTarget.id}` }])
            })
            const result = await response.json();
            console.log(result);
            setShouldFetch(true);
        } catch (err) {
            console.log(err);
        }
    }

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch('https://crudapi.co.uk/api/v1/servers', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer s7O03_9dOLr4OsDUvnr9ncxfSt5ETbHW3saBVJxFMCJsMAq2bg'
                    }
                })
                const result = await response.json();
                setData(result.items);
                //  console.log(result.items);
            } catch (err) {
                console.log(err);
            }
        };

        fetchData();
        setShouldFetch(false);
    }, [shouldFetch]);

    useEffect(() => {
        setShouldFetch(true);
    }, [])

    return (
        <>
            <form>
                <input type="text" onChange={(e) => setTitle(e.target.value)} placeholder="title" required />
                <input type="text" onChange={(e) => setDesc(e.target.value)} placeholder="desc" required />
                <input type="text" onChange={(e) => setCategory(e.target.value)} placeholder="category" required />
                <button onClick={handleSubmit}>Register</button>
            </form>

            {data ? data.map((curr, idx) => {
                return <div className={`wrapper ${idx}`} key={curr._uuid} >
                    <span>{curr.title}</span>
                    <span>{curr.desc}</span>
                    <span>{curr.category}</span>
                    <div className="actions">
                        <button onClick={handleDelete} id={curr._uuid} >DELETE</button>
                    </div>
                </div>
            }) : <div>Loading....</div>}
        </>
    );
}