How to fix invalid hook call error in my airtable extension?

I'm getting this error in my Airtable blocks extension: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I'm unsure as to why. My program uses airtable blocks api to create a dropdown that sets a useState value, before useEffect updates a database live. Both hooks are being used inside the function body, and the function should be a react component, so I don't understand where the error lies. I've seen it can be due to react version conflicts and such as well, but I'm not sure how to confirm whether or not that is the underlying issue.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {
    Select,
    initializeBlock,
    SelectSynced,
    useBase,
    useRecords,
    BaseProvider,
    useGlobalConfig,
    expandRecord,
    TablePickerSynced,
    ViewPickerSynced,
    FieldPickerSynced,
    FormField,
    Input,
    Button,
    Box,
    Icon,
} from '@airtable/blocks/ui';
import { FieldType } from '@airtable/blocks/models';

const base = useBase();
const table = base.getTable("National Works In Progress");

export default function FilterApp() {
    // YOUR CODE GOES HERE

    let records = useRecords(table);

    var aunumbers_array = [];

    const [value, setValue] = useState("");

    const queryResult = table.selectRecords({ fields: ["AU Number"] });

    records.forEach(function (x) {
        if (aunumbers_array.indexOf(x.getCellValueAsString("AU Number"), -1)) {
            aunumbers_array.push({ value: x.getCellValueAsString("AU Number"), label: x.getCellValueAsString("AU Number") })
        }
    });

    queryResult.unloadData();

    let updates = [];

    useEffect(() => {
        const fetchData = async () => {

            records.forEach(function (x) {
                if (x.getCellValueAsString('AU Number') == value) {
                    updates.push({ id: x.id, fields: { 'Matches Filter': true } });
                    console.log(value);
                }
                else if (x.getCellValueAsString('AU Number') !== value && x.getCellValueAsString('Matches Filter') == 'checked') {
                    updates.push({ id: x.id, fields: { 'Matches Filter': false } });
                }
            });

            while (updates.length) {
                await table.updateRecordsAsync(updates.splice(0, 50));
            }

        }
        // call the function
        fetchData()
            // make sure to catch any error
            .catch(console.error);
    }, [value])
    
    return (
        <div>
            <FormField label="Text field">
                <Select
                    options={aunumbers_array}
                    value={value}
                    onChange={newValue => setValue(newValue.toString())}
                    width="320px"
                />
            </FormField>
        </div>   
        
    );
}