Overriding text color in React + Framer?

Question

I'd like to override the text color of my Component to make it a multi-stop linear gradient. Following the code examples provided by Framer, this is what I've tried:

export const withCustomColor = (Component): ComponentType => {
    // This part of the code is only run once when creating the component
    return (props) => {
        // This part runs every time the component is rendered.
        return (
            <Component
                {...props}
                color="linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)"
            />
        )
    }
}

This does nothing. If I instead do the following, I get the linear gradient but as a background block, not the actual text color:

            <Component
                {...props}
                animate={{
                    background:
                        "linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)",
                }}
            />

But putting color inside the animate brackets does nothing.

How can I change the text color to be the linear gradient using Framer overrides?