Bug: Nested artboard return no inputs for both parent and child with nested input

[rooneyhoi]

I have an .riv file created with the latest Rive editor, and it has parent and chid artboards as nested artboard.

binh_nested_artboard.zip

The @rive-react library version is the latest one up to now: "@rive-app/react-canvas": "^4.17.10",

Rive file is initialized as below

const { RiveComponent, rive } = useRive({
		src,
		parentStateMachines, // declared as props
		artboard: 'Website',  // the 2nd item in artboard array
		autoplay: true,
		useDevicePixelRatio: true,
		layout: new Layout({
            fit: Fit.Cover, // Adjust this to Fit.Contain or Fit.Fill as needed
            alignment: Alignment.Center, // Center alignment
        }),
		onLoadError: () => {console.log('Error while loading')}
	});

ISSUE 1: Active artboard must be hard-coded With nested artboard, when the rive file is loaded in React application, rive's contents returns an array of arboards like below and it orders alphabetically. artboards: (2) [{…}, {…}][[Prototype]]: Object

It means, correct me if I'm wrong, when adding Rive file to initilize, we need to 'hard code' the parent artboard, otherwise, react-rive library will load the 1st element in the artboard array.

ISSUE 2: Nested state machine has zero Inputs in return Using useStateMachineInput hook seems not work anymore. I tried with both parent and child input but it return null.

const parentInput = useStateMachineInput(rive, parentStateMachines, 'Zoom_in');
const childInput = useStateMachineInput(rive, childStateMachines, '"isHeadlineZoomed"');

=> all of them return null

So, to check the loaded rive file, I use useEffect as below

	useEffect(() => {
		if (rive) {
			console.log("Rive contents:", rive.contents);
	
			// Log artboards and state machines
			const artboards = rive.contents.artboards;
			artboards.forEach((artboard, index) => {
				console.log(`Artboard ${index}:`, artboard);
			});
	
			console.log(`Active Artboard: ${rive.activeArtboard}`);
			console.log("State Machines:", rive.stateMachineNames);
	
			// Check if the state machine exists
			if (rive.stateMachineNames.includes("Website State Machine")) {
				const inputs = rive.stateMachineInputs("Website State Machine");
				console.log("Inputs:", inputs);
			} else {
				console.error("State machine 'Website State Machine' not found.");
			}
		}
	}, [rive]);

and the outputs are:

As you can see, rive file is loaded and initialize successfully but doesn't have any input in stateMachineInputs. I am aware and already did the "Expose to parent artboard" with child artboard's inputs.

I also checked the latest document with this link Nested Inputs however the functions (or hook) are very limited:

setNumberStateAtPath(inputName: string, value: number, path: string)
setBooleanStateAtPath(inputName: string, value: boolean, path: string)
fireStateAtPath(inputName: string, path: string)

This is also mean that, there's no GET hook or function to get and update the artboard input from rive, which can be done by using useStateMachineInput when we have single artboard rive file.

note: I already updated the latest rive-react in my project

  "dependencies": {
    "@rive-app/react-canvas": "^4.17.10",
  }

Any feedback or suggestions are welcomed.