How to properly mock useRef hook with react-testing-library and jest - reactjs

Question

I am having some problems to properly mock useRef hook in am project I am developing. I am using React with Typescript in my project, and using react testing library and jest to unit test my components.
After going throughout the documentation and a few blog posts, I am still unsure why I am unable to make it work correctly as it seems a fairly simple case. I have isolated the problem in a CodeSandbox.
This would be the main component of my example to replicate the problem. I simply have a button that executes a method implemented in the referenced component and the referenced component itself to which I pass the ref.
import { useRef } from "react";
import ReferencedComponent, { References } from "./ReferencedComponent";
export default function UseRefTest() {
const refApiCallUiFeedback = useRef<References>(null);
return (
<>
<button onClick={() => refApiCallUiFeedback.current?.ReferencedMethod()}>
BUTTON
</button>
<ReferencedComponent ref={refApiCallUiFeedback} />
</>
);
}
This is the actual "ReferencedComponent". It is a dummy component containing a method which is exposed via "useImperativeHandle"
import React, { Ref, useImperativeHandle } from "react";
export interface References {
ReferencedMethod: () => void;
}
function ReferencedComponentWrapped(empty: {}, ref: Ref<References>) {
function ReferencedMethod() {
console.log("Calling real referenced method");
}
useImperativeHandle(ref, () => ({
ReferencedMethod
}));
return (
<>
<div>Referenced Component</div>
</>
);
}
const ReferencedComponent = React.forwardRef(ReferencedComponentWrapped);
export default ReferencedComponent;
Finally this it the unit test in which I simply fire the click event and expect the method to be called.
import React, { RefObject } from "react";
import { render, fireEvent, screen } from "#testing-library/react";
import UseRefTest from "../UseRefTest";
import { References } from "../ReferencedComponent";
describe("Testing if useRef Mocking", () => {
beforeEach(() => {});
afterEach(() => {
jest.restoreAllMocks();
jest.resetAllMocks();
jest.clearAllMocks();
});
test("is working as expected", async () => {
//ARRANGE
const mockReferencedMethod = jest.fn(() =>
console.log("Calling mocked referenced method")
);
const refs: RefObject<References> = {
current: { ReferencedMethod: mockReferencedMethod }
};
jest.spyOn(React, "useRef").mockReturnValue(refs);
render(<UseRefTest />);
//ACT
fireEvent.click(screen.getByRole("button"));
//ASSERT
expect(mockReferencedMethod).toBeCalled();
});
});
You can find here the full working example -> CodeSandBox