MockedProvider does not work when Component query changes - reactjs

Question

I have simplified problem into these files
TestComp.tsx
export const TestComp: FC<> = () => {
const [testValue, setTestValue] = React.useState(5);
const where = React.useMemo(() => testValue, [testValue]);
const { data: productsData } = useQuery<QueryProductsResult>(QUERY_PRODUCTS, {
variables: {
where,
},
});
setTimeout(() => {
setTestValue(7);
}, 0);
console.log(productsData, where);
return <div>content</div>;
};
TestComp.test.tsx
const productsData = [
{
... some data ...
},
];
const mockContractPricing = [
{
request: {
query: QUERY_PRODUCTS,
variables: {
where: 7,
},
},
result: {
data: {
products: productsData,
},
},
},
];
describe('dsfgdas', () => {
it('ggg', async () => {
const { container } = render(
<MockedProvider mocks={mockContractPricing} addTypename={false}>
<TestComp />
</MockedProvider>
);
await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
console.log(container.innerHTML);
});
});
So when where is updated it does not work. If I put where=7 since in the beginning it does not work. But if it is changing inside the component it never works out. Even trying to make it where: 7 in the mocked query it doesn't work.
The setTimeout is put only for demonstration purpose.
Is there any way to do it?
Console output:
console.log
undefined 5
console.log
undefined 7
console.log
content