Javascript/React code – control/page won’t render in fileReader.onload

I have a react page and one of my inputs is a file upload. When loading, I want to read in the file (it’s JSON) and then show the file as a tree to allow my users to select nodes (rules) to run against another dataset. BUT, when I pick the JSON file and the ‘onload’ event handler actually fires off, the page just stops rendering, I get a blank screen. I’m not sure why, I can’t see any errors, but I AM IGNORANT with react and kinda new with javascript as well. So, this is quite likely just a dumb thing I’m doing. Can someone point me at what I’m doing wrong here?

    handleRules(event) {
        const ruleRdr = new FileReader();
        ruleRdr.onload = async (e) => {
            const rBuf = (e.target.result);
            const rData = JSON.parse(new TextDecoder().decode(rBuf));
            // the data is there, but it's not mapping into the tree...!?!?!?
            const tree = {
                name: "QA/QC Rules",
                id: 1,
                toggled: true,
                children: rData.map((wFlow, index) => ({
                    name: wFlow.WorkflowName,
                    id: index,
                    children: wFlow.Rules.map((rule, idx) => ({
                        name: rule.RuleName,
                        id: idx
                    }))
                }))
            };
            this.setState({ ruleData: rData, hasRules: true, treeData: tree });
        }
        ruleRdr.readAsArrayBuffer(event.target.files[0]);
    }