Grid not sorting or filtering (no state change)

const ReferralListSeg: React.FC<ReferralListSecProps> = (props: ReferralListSecProps) => {
    const [referrals, setReferrals] = React.useState<Referral[]>([]);
    const [gridState, setGridState] = React.useState({ filter: null, group: null, skip: 0, sort: null, take: 100, editField: undefined });

    const setGridState1 = (e) => {
        const { filter, group, skip, sort, take } = e.dataState;
        const newState = { filter, group, skip, sort, take, editField: undefined };
        setGridState(newState);
    }

    const totalRecords = (): number => {
        return referrals.length;
    }

    React.useEffect(() => {
        axios.get(apiAppendCode(apiURL('/ClientReferralsOpen/' + props.clientid)))
            .then((response) => {
                setReferrals(response.data);
            }, (error) => {
                debugger;
            });
    }, []);

    React.useEffect(() => {
    }, [gridState, setGridState]);

    return (
        <div className="container-fluid">
            {referrals &&
                <Grid
                    filterable={true}
                    sortable={true}
                    resizable={true}
                    pageable={true}
                    data={referrals}
                    total={totalRecords()}
                    {...gridState}
                    onDataStateChange={setGridState1}
                >
                    <Column sortable={true} field="createdon" title="Created" width="150px" cell={KendoGridDateCell} />
                    <Column field="name" title="Name" width="250px" />
                    <Column field="status" title="Status" cell={KendoGridRefStatusCell} />
                    <Column filterable={false} cell={KendoGridNavRefCell} width="180px" />
                </Grid>
            }
        </div>
    );
}