Dynamically Change Part of a Rive Animation Color with React

Question

I'm working with Rive animations in a React project and am trying to dynamically change the color of a specific part of my animation based on user input.

I'm using the @rive-app/react-canvas package to integrate the Rive animation into my webpage. Here's how I've set it up so far:

"use client";
import React, { useState, useEffect } from 'react';
import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

export default function About() {
    const [color, setColor] = useState('#FFFFFF'); // Default color

    const { rive, RiveComponent } = useRive({
        src: 'alien_spider.riv',
        stateMachines: 'State Machine 1',
        autoplay: false,
    });

    return (
        <div>
            <RiveComponent className="w-96 h-96"
                onMouseEnter={() => rive && rive.play()}
                onMouseLeave={() => rive && rive.pause()}
            />
            <input type="color" onChange={(e) => setColor(e.target.value)} value={color} />
        </div>
    );
}

My goal is to make a part of the animation, like the "head", change color according to what the user selects.

I have seen some exemple of how to do it with the Flutter integration, but I was not able to replicate it with the React one.

Any help or pointers would be greatly appreciated!