useRef type on React Draggable - reactjs

Question

I am relatively new to coding and especially to Typescript. I am trying to create a React Draggable modal that changes its bounds when the window gets resized and move the modal with it, so it never gets out of the window. I have created a function that does that but I am struggling to use the correct type for the ref draggableRef that is used on the actual draggable. What type is the draggableRef? Whatever I change it to there is problem with the .state.x; on the modalOffsetLeft that it doesn't exist on it.
Or, is there other way to do it? Thanks!
here is the code:
export const DraggableModal: React.FC<DraggableModalProps> = ({
draggableProps,
onClose,
}) => {
const [bounds, setBounds] = useState({
width: 0,
height: 0,
});
const ref = useRef<HTMLDivElement>(null);
const draggableRef = useRef<DraggableCore>(null);
const rootWindow = document.getElementById('root') as HTMLDivElement;
const getValues = () => {
if (ref.current !== null && draggableRef.current !== null) {
const modalWidth = ref?.current?.clientWidth;
const draggableWindowWidth = rootWindow?.clientWidth - modalWidth;
const modalOffsetLeft = draggableRef?.current?.state.x;
setBounds({
width: draggableWindowWidth,
height: rootWindow?.clientHeight - ref.current.offsetHeight,
});
if (modalOffsetLeft > draggableWindowWidth) {
draggableRef.current.state.x = draggableWindowWidth;
}
}
};
useEffect(() => {
getValues();
}, []);
parent.onresize = getValues;
return (
<Draggable
ref={draggableRef}
bounds={{
left: 0,
top: 0,
right: bounds.width,
bottom: bounds.height,
}}
{...draggableProps}
handle="#handle"
>
<DraggableWrapper>
...
</DraggableWrapper>
....

Answer 1

instead of updating its x,y using ref try to create a state {x,y} and then update this x and y.
then pass x and y to position props in Draggable.
by the way you can run the function get values in the more clearing way by adding the function to a listner that runs when the window is changes.