I use this component a lot inside my app, https://ant.design/components/transfer/

  <Transfer
   dataSource={mockData}
   titles={['Source', 'Target']}
   targetKeys={targetKeys}
   selectedKeys={selectedKeys}
   onChange={onChange}
   onSelectChange={onSelectChange}
   onScroll={onScroll}
   render={item => item.title}
/>

The problem is I want to implement custom feature such that It will select all items between click and shift click, or a drag to select all, currently the ant design API only supports select all, inverse which are not suitable for me because I have 100s of rows.

How would I approach this issue, are there any other npm packages I can use to get this done? I have never implemented stuff like keyboard shortcuts and features like this so I am looking for suggestions or even raw ideas.