React - как объявить эту переменную

У меня есть этот компонент, который делает вид, что получает идентификатор категории продуктов, делает вызов бэкенду через API и возвращает продукты этой категории.

Для этого при первом рендеринге компонента я делаю вызов API по умолчанию без необязательных параметров и возвращаю, например, 10 элементов.

Но затем у меня есть некоторые фильтры, такие как цена от, цена до или марка продукта, которые я собираю эти значения и отправляю их в API, чтобы вернуть JSON с продуктами.

По этой причине я создал функцию «handleButtonCLick», целью которой является сбор значений фильтров (поле ввода) и выполнение вызова API через сообщение.

По этой причине я создал функцию «handleButtonCLick», целью которой является сбор значений фильтров (поле ввода) и выполнение вызова API через сообщение.

import axios from 'axios'
import GuestLayout from '@/components/Layouts/GuestLayout'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

const Name = ({ itemsList }) => {
    const router = useRouter()

    //const [itemsList, setItemsList] = useState([])

    const handleButtonCLick = (event, value) => {

        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                category_id: 100,
            }),
        }

        fetch(
            `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/`,
            requestOptions,
        )
            .then(response => response.json())
            .then(json => setItemsList(json))
    }

    return (
        <GuestLayout>

            <div>
                {itemsList.map((x, i) => (
                      {x.price}€
                ))}
            </div>

            <div className = "py-12">
                  <Button  variant = "outlined"
                           onClick = {handleButtonCLick}>
                           Search items
                  </Button>
            </div>
        </GuestLayout>
    )
}


Name.getInitialProps = async context => {

    let valor = 1;

    const { data } = await axios.post(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/${valor}/`,
    )

    return { itemsList: data }
}

export default Name

Я делаю вызов, но я не знаю, как установить полученный результат в «itemsList», потому что, если я установлю его таким образом, это говорит мне, что я не могу определить его СНОВА.

const [itemsList, setItemsList] = useState([])