I need to somehow divide the text in half and paint one part with one color, the other with another.

I’m using React-pixi library, this is a wrap of Pixi JS for React JS.

At first I thought it could be done with a mask, but now I’m not sure. the mask only takes shape, but does not change color in any way. I looked in the library but didn’t find any way to do this.

How can I paint the bottom path with a black color and leave the top as is?

Example

Here is an example React component on typescript but it’s not working as I thought:

export const Test = () => {
    const maskRef = useRef()

    const drawScale = useCallback((g: any) => {
        g.clear()
        g.beginFill(colors.fillColor)
        g.drawRect(0, 0, 300, 500)
    }, [])

    const drawFill = useCallback((g: any) => {
        g.clear()
        g.beginFill(colors.green)
        g.drawRect(0, 0, 300, 500)
    }, [])

    const getTextStyle = (color: string): TextStyle =>
        new TextStyle({
            fill: color,
            fontSize: 60,
        })

    return (
        <Stage width={300} height={500} options={{ antialias: true, backgroundAlpha: 0 }}>
            <Container width={300} height={500} mask={maskRef.current}>
                <Graphics draw={drawScale} />
                <Text text="69" style={getTextStyle(colorsHex.borderColor)} anchor={0.5} x={150} y={250} />
            </Container>
            <Container width={300} height={250} ref={maskRef}>
                <Graphics draw={drawFill} />
                <Text text="69" style={getTextStyle(colorsHex.indicationTextColor)} anchor={0.5} x={150} y={250} />
            </Container>
        </Stage>
    )
}

Can anybody help me with that, please?
PS Recently sorry for possible duplication of question. I don’t know even how to name my problem to google