javascript - 为什么在测试时按钮的值不可用？

我有一个测试环境，用于验证当点击按钮时 ToggleButtonGroup 的 value 属性是否会被切换。我该如何访问该值？在渲染时如何设置该属性的值？

测试

const setup = () => {
    const utils = render(
        <BrowserRouter>
            <Page/>
        </BrowserRouter>
    );

    // buttons
    const buttonGroup = utils.getByTestId('buttonGroup');
    const runningButton = utils.getByTestId('runningButton');

    return {
        buttonGroup, runningButton,
        ...utils
    }
}
describe('Page', () => {
        test('should toggle alerts', async () => {
        const {buttonGroup, runningButton} = setup();
        act(() => {
            fireEvent.click(runningButton);
        });
        // First fail
        expect(buttonGroup.value).toBe('Y');

        /* OUTPUT
        Error: expect(received).toBe(expected) // Object.is equality

        Expected: "Y"
        Received: undefined
        */
        
       // Second fail
        expect(buttonGroup).toBe('Y');
        /* OUTPUT
        Error: expect(received).toBe(expected) // Object.is equality

        Expected: "Y"
        Received: undefined
        /* OUTPUT - no "value" defined
        Expected: "Y"
        Received: <div class="btn-group btn-group-sm" data-testid="buttonGroup" role="group">
        <input autocomplete="off" class="btn-check" id="tbg-radio-1" name="alerts" type="radio" value="Y" />
        <label class="btn btn-outline-success" data-testid="runningButton" for="tbg-radio-1" tabindex="0">Running</label>
        <input autocomplete="off" class="btn-check" id="tbg-radio-2" name="alerts" type="radio" value="N" />
        <label class="btn btn-outline-danger" data-testid="suspendedButton" for="tbg-radio-2" tabindex="0">Suspended</label>
        </div>
        */
    });
    
});

代码

   const [processAlerts, setProcessAlerts] = useState<string>('');
    const [controls, setControls] = useState<any>({
        processAlerts: '',
    });
    
    useEffect(() => {
        Service.getControls()
            .then(data => setControls(data)
            );

    }, []);
    
    useEffect(() => {
        setProcessAlerts(controls.processAlerts);

    }, [controls]);
    
    const handleAlertChange = useCallback(async (value: string) => {
        setProcessAlerts(value);
    }, []);

 return (
        <>
<ToggleButtonGroup data-testid='alertButtonGroup'
                                               size='sm' type="radio" name="alerts"
                                               value={processAlerts}
                                               onChange={handle=Change}
                                               >
                                <ToggleButton data-testid='buttonGroup' id="tbg-radio-1" value={'Y'}
                                              variant={outlineSuccess}>
                                    Running
                                </ToggleButton>
                                <ToggleButton data-testid='suspendedButton' id="tbg-radio-2" value={'N'}
                                              variant={outlineDanger}>
                                    Suspended
                                </ToggleButton>
                            </ToggleButtonGroup>
                                );
}