How to make element draggable/resizeable in react to achieve resizeable column in antd table?

I’m using reacts antd library to display my table contents. I want to add a feature to resize my column widths. Hence I’m wrapping the column in my as shown below. Dragging is working fine as expected but the problem is handleMouseUp method is triggered only when I click again but not called when I release the mouse . I followed the the link https://www.w3schools.com/HOWTO/howto_js_draggable.asp to achieve it but there seems to be some problem as I stated earlier which I couldn’t figure it out.

Please help me on what could be the issue with the below code

import React from 'react';
import { memo } from 'react';

const ResizeableHeaderComponent = (props: any) => {
  const onResize = (event: MouseEvent) => {
    if (event.movementX != 0) {
      event.preventDefault();
      props.onResize(event, props.index);
    }
  };

  const handleMouseUp = () => {
    window.removeEventListener('mousemove', onResize);
  };

  const handleMouseDown = () => {
    window.addEventListener('mousemove', onResize);
    window.addEventListener('mouseup', handleMouseUp);
  };
  return (
    <>
      {props.title}
      <div
        draggable={true}
        style={{
          position: 'absolute',
          bottom: 0,
          right: '-5px',
          width: '10px',
          height: '100%',
          zIndex: 5,
          cursor: 'col-resize'
        }}
        onMouseDown={handleMouseDown}
      />
    </>
  );
};

export default memo(ResizeableHeaderComponent);