DragitemContent is coming back as undefined using react drag and drop

I'm trying to create a table with two columns, with one of them being draggable. Decided to use the vanilla drag and drop function. The main issue it this piece of code const dragItemContent = copyListItems[dragItem.current];. dragItemContent is coming through as undefined and I'm not sure why, any help would be appreciated.

The rest of my code is below to give more context.

    const standardNames = ['Tests 1', 'Tests 2', 'Tests 3', 'Tests 4', 'Tests 5'];
    const [columnNames, setData] = useState([
        'Test 5', 'Test 3', 'Test 2', 'Test 4', 'Test 1'
    ]);
    const dragItem = useRef<any>();
    const dragOverItem = useRef<any>();

    const dragStart = (e: any) => {
        dragItem.current = e.target.id;
        console.log(e.target.innerHTML);
    };

    const dragEnter = (e: any) => {
        dragOverItem.current = e.currentTarget.id;
        console.log(e.currentTarget.innerHTML);
    }

    const drop = () => {
        const copyListItems = [...columnNames];
        const dragItemContent = copyListItems[dragItem.current];
        copyListItems.splice(dragItem.current, 1);
        copyListItems.splice(dragOverItem.current, 0, dragItemContent);
        dragItem.current = null;
        dragOverItem.current = null;
        setData(copyListItems);
    }

    return (
        <Container /*style={cancellationContainerStyle}*/>
            <Table className="mt-3" style={{ backgroundColor: 'white' }} bordered hover>
                <thead>
                    <tr style={{ backgroundColor: 'white' }}>
                        <th className="styleCancellationsColHeader" style={{ backgroundColor: 'white' }}>Standard Template Names</th>
                        <th className="styleCancellationsColHeader" style={{ backgroundColor: 'white' }}>Excel Column Names</th>
                    </tr>
                </thead>
                <tbody>
                    {standardNames.map((standardName: string, index) => (
                        <tr>
                            <td>
                                {standardNames[index]}
                            </td>
                            <td draggable
                                onDragStart={(e) => dragStart(e)}
                                onDragEnter={(e) => dragEnter(e)}
                                onDragEnd={drop}
                                key={columnNames[index]}
                                id={columnNames[index]} >
                                {columnNames[index]}
                            </td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </Container>
    )

I have had to put the any tpe with the useref otherwise I get this error Type 'undefined' cannot be used as an index type (property) React.MutableRefObject<undefined>.current: undefined

I have just realised the issue. I was putting in the id as the index here const dragItemContent = copyListItems[dragItem.current]; Which is why it was coming back as undefined. I did this as a way to get arouynd this issue.

    const dragStart = (e: any) => {
        dragItem.current = columnNames.indexOf(e.target.id);
        console.log(e.target.innerHTML);
    };

    const dragEnter = (e: any) => {
        dragOverItem.current = columnNames.indexOf(e.currentTarget.id);
        console.log(e.currentTarget.innerHTML);
    }