کاربرد useCallback در برنامه های react

Question

در مثال زیر برای جلوگیری از re-render مقادیر تصادفی در کامپوننت Child از useCallback استفاده کردم ولی هر بار با کلیک بر روی buttom یک مقدار تصادفی برای من نمایش داده می شود در حالی که dependency های useCallback همیشه مقداری ثابت می باشد لطفا راهنمایی کنید

import React, {useCallback, useEffect, useMemo, useState} from 'react';

const TestCallback = () => {

    const [num, setNum] = useState(0)
    const color =  5
    const Child = ({colorId}) => {
        const [randomNum, setRandom] = useState(0)

        const setRandomNum = useCallback(() => {
            const min = 1;
            const max = 100;
            const rand = min + Math.random() * (max - min);
            setRandom(rand)
        }, [colorId])

        useEffect(() => {
            setRandomNum()
        }, [setRandomNum])

        return (
            <>
                random number is {randomNum}
            </>
        )
    }

    return (
        <>
            <div style={{display: "flex", justifyContent: "center", flexDirection: "column", padding: "20%"}}>
                <button onClick={() => setNum(num + 1)}>click</button>
                <br/>
                {num}
                <br/>
                <Child colorId={color}/>
            </div>
        </>
    )
    
}


export default TestCallback