Некорректный порядок создания элементов

Нужна ваша помощь. У меня есть код, который посылает запрос на backend и заносит данные в базу данных. Однако есть проблема. В базе данных у меня уже предварительно были созданы 4 элемента (объекты) в базе. При создании нового элемента, у меня он создается с id=33 и кроме этого, при каждой перезагрузке страницы, у меня создается новый пустой объект. Скажите, это проблема с кодом на Frontend, или нужно эту проблему решать на Backend? Спасибо вам)

import React, {useEffect, useState} from "react";
import axios from "axios";

export let Form_Post = () => {

let [name, setName] = useState('')
let [price, setPrice] = useState('')
let [description, setDescription] = useState('')

let submitName = (e) => {
    setName(e.target.value)
}

let submitPrice = (e) => {
    setPrice(e.target.value)
}

let submitDescription = (e) => {
    setDescription(e.target.value)
}

let sendLaptop = (event) => {
    axios.post("http://localhost:8081/laptop", {
        name: name,
        price: price,
        description: description
    })
    if (event) {
        event.preventDefault()
    }
    setName('')
    setPrice('')
}

useEffect(() => {
    sendLaptop();
},[])

return (<form onSubmit={sendLaptop}>
    <input
        type="text"
        value={name}
        onChange={submitName}
    />
    <input
        type="text"
        value={price}
        onChange={submitPrice}
    />
    <input
        type="text"
        value={description}
        onChange={submitDescription}
    />
    <button onSubmit={sendLaptop} type="submit">Send</button>
        </form>)
}