Why is the materializecss checkbox not showing up? React

Question

The checkbox is displayed if added simply to html, if added via useState, then it is not visible. Please tell me how to add an element to the page correctly so that it is displayed correctly and in the future I can interact with it. I checked that the element is present in the code, when hovering through the Elements Chrome Console, the area occupied by the checkbox is highlighted

        const getAllProducts = useCallback(async () => {
            const allProductsData = await request('/api/cp/getAllProducts', 'POST', {})
            const packagesKeys = Object.keys(allProductsData)

            const htmlTableData = packagesKeys.map((data, index) => {
                return(
                    <>
                        <tr>
                            <td>{index + 1}.</td>
                            <td colSpan={3}>{data}</td>
                            <td>Стандартная цена</td>
                            <td>Добавить в пакетное предложение:</td>
                        </tr>
                        {allProductsData[data].map((row) => {
                            return(
                                <tr
                                    key={"tr-" + row._id + "-" + index}
                                >
                                    <td><input type="checkbox" /></td>
                                    <td>{row.name}</td>
                                    <td>Counts</td>
                                    <td>Ind price</td>
                                    <td>Standard price</td>
                                    <td>Choose package</td>
                                </tr>
                            )
                        })}
                    </>
                )
            })
            setHtmlTable(htmlTableData)
        }, [request, setHtmlTable])

        useEffect(() => {
            getAllProducts().then()
        }, [getAllProducts])

        useEffect(() => {
            window.M.updateTextFields()
            window.M.AutoInit()
        }, [])

        return (
            <div className="row">
                <p>
                    <label>
                        <input type="checkbox" onChange={showIndPriceClient} />
                        <span>Показать Клиенту индивидуальные цены</span>
                    </label>
                </p>
                <p>
                    <label>
                        <input type="checkbox" onChange={showIndPriceClient} />
                        <span>Отображать в соответствующих полях  установленные в этом КП индивидуальные цены во всех последующих КП как изначальные</span>
                    </label>
                </p>
                <div className="input-field col s8">
                    <select>
                        <option value="" disabled>Доп. отображение цен в валютах</option>
                        <option value="1">- в рублях (Россия)</option>
                        <option value="2">- в Тенге (Казахстан)</option>
                        <option value="3">- в Долларах (США)</option>
                        <option value="4">- в Рублях + Долларах</option>
                        <option value="5">- в Рублях + Тенге</option>
                    </select>
                </div>
                <div className="input-field col s4">
                    <a className="waves-effect waves-light btn">Очистить всё</a>
                    <p>
                        Итоговая сумма КП:
                    </p>
                    <p>
                        0 руб.
                    </p>
                    <a className="waves-effect waves-light btn">Сохранить</a> <br/>
                    <a className="waves-effect waves-light btn">Ссылка на PDF</a>
                </div>
                <table id="products">
                    <tbody>
                    {htmlTable}
                    </tbody>
                </table>
            </div>
        )

Attached a screenshot for clarity

What's my mistake?