Variable for "ID" in delete call to endpoint is set to "undefined" even when I have an ID variable added – Asp.net

So I have a webapplication that is using axios to make endpoint request to my api that is on Swagger. In my app currently get and post calls work but not puts or deletes.

For my delete call I pass the userID into the ID field in the URL:

const onDelete = (userId) => {
        axios.delete(`https://localhost:44373/api/Users/${userId}`)
            .then(() => {
                getData();
            })
    }

But in the console it shows the following two errors:

DELETE https://localhost:44373/api/Users/undefined 400 xhr.js:210

and:

Uncaught (in promise) Error: Request failed with status code 400
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

This is my full "ReadUser" file:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Table } from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Link } from 'react-router-dom';




export default function Read() {

    const setData = (data) => {
        let { userId, firstName, lastName, emailAddress, phoneNumber, password } = data;
        localStorage.setItem('UserId', userId);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('EmailAddress', emailAddress);
        localStorage.setItem('Phonenumber', phoneNumber);
        localStorage.setItem('Password', password)
    }

    const url = `https://localhost:44373/api/Users`;
    const getData = () => {
        axios.get(url)
            .then((getData) => {
                setAPIData(getData.data);
            })
    }

    const onDelete = (userId) => {
        axios.delete(`https://localhost:44373/api/Users/${userId}`)
            .then(() => {
                getData();
            })
    }

    const [APIData, setAPIData] = useState([]);
    useEffect(() => {
        axios.get(`https://localhost:44373/api/Users`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

  

    return (

        <div>
            <Table bordered>
                <thead>
                    <tr>
                        <th key="firstName">First Name</th>
                        <th key="lastName">Last Name</th>
                        <th key="emailAddress">Emailaddress</th>
                <th key="phoneNumber">Phonenumber</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                    {APIData.map((data) => {
                        return (
                            <tr>
                                <td>{data.firstName}</td>
                                <td>{data.lastName}</td>
                                <td>{data.emailAddress}</td>
                                <td>{data.phoneNumber}</td>
                                <td><Link to='/UpdateUser'><td><button className="table-btn" onClick={() => setData(data)}>Update</button></td></Link></td>
                                <td>
                                    <button className="table-btn" onClick={() => onDelete(data.id)}>Delete</button>
                                    </td>
                            </tr>
                        )
                    })}
                </tbody>
            </Table>
        </div>
    )
}

Also I keep getting "Warning: Each child in a list should have a unique "key" prop."

But as far as I can tell I have added the correct keys? Thanks for any help!