useCallback and memoization

How the memorized callback function works? In some articles I read that the function is recreated if we do not use useCallback. But if it is recreated, should it be different from the prev version? In my code I didn’t notice that there was a difference in callback functions.
My question is: Why in both cases, my set size is 1?

from off doc useCallback

Returns a memoized callback.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Pass an inline callback and an array of dependencies. useCallback will
return a memoized version of the callback that only changes if one of
the dependencies has changed. This is useful when passing callbacks to
optimized child components that rely on reference equality to prevent
unnecessary renders (e.g. shouldComponentUpdate).

import { useCallback } from "react";

const dataSource = [
    {
        id: 1,
        model: "Honda",
        color: "red",
    },
    {
        id: 2,
        model: "Mazda",
        color: "yellow",
    },
    {
        id: 3,
        model: "Toyota",
        color: "green",
    },
];

const Car = ({ model, color, set, onCarClick }) => {
    const onClick = () => onCarClick(model, color);
    set.add(onCarClick);
    console.log(set.size);
    return (
        <div onClick={onClick}>
            Model: {model} Color: {color}
        </div>
    );
};

const CarsCallback = ({ cars, set }) => {
    const onCarClick = (model, color) => {
        console.log(model, color);
    };
    console.log("CarsCallback");
    return (
        <>
            {cars.map((car) => {
                return (
                    <Car
                        key={car.id}
                        set={set}
                        {...car}
                        onCarClick={onCarClick}
                    />
                );
            })}
        </>
    );
};

const CarsUseCallback = ({ cars, set }) => {
    const onCarClick = useCallback((model, color) => {
        console.log(model, color);
    }, []);
    console.log("CarsUseCallback");
    return (
        <>
            {cars.map((car) => {
                return (
                    <Car
                        key={car.id}
                        {...car}
                        set={set}
                        onCarClick={onCarClick}
                    />
                );
            })}
        </>
    );
};

export default function App() {
    return (
        <div className="App">
            <CarsCallback cars={dataSource} set={new Set()} />
            <CarsUseCallback cars={dataSource} set={new Set()} />
        </div>
    );
}

>Solution :

Because CarsUseCallback and CarsCallback was triggered once.

We can see the only one log of CarsUseCallback and CarsCallback.

If we re-render the CarsUseCallback and CarsCallback, we can see the size is 1 and 2.

const CarsCallback = ({ cars, set }) => {
  const [count, setCount] = useState(1);
  console.log('CarsCallback');
  useEffect(() => {
    setCount(2);
  }, []);
  // ...

};

const CarsUseCallback = ({ cars, set }) => {
  const [count, setCount] = useState(1);
  console.log('CarsUseCallback');

  useEffect(() => {
    setCount(2);
  }, []);
  // ...

}