Use serverless function to findById in MongoDB Database via Mongoose, and render result in React form - not working

I have built an 'edit' page which is attempting to pull an individual object in my MongoDB Database, by using 'findById' in a serverless function hosted by Vercel.

The response data I'm then attempting to use to populate the 'value' of different inputs on this 'edit' page.

However, I'm getting no response from my call (not even an error message, neither in my console or my function logs on Vercel) - the page is loading successfully, but no data is being put into the inputs, they're coming through as blank. I've added a console log for the response, and the details of that are in the edit below.

It's worth noting - the URL is the MongoDB ID for the object that's being called!

I have tried refactoring my code, searching for solutions, going through tutorials, but nothing seems to be working. It's frustrating as I'm just not getting any feedback from my app, so don't know what I'm doing wrong?

If anyone has any feedback on my code, that'd be appreciated. Please let me know if I've missed anything out below.

The 'child' and 'parent' components are just how the page gets navigated to.

My 'route' via React Router:

<Route path="/edit/:id" component={EditDebt} />

My MongoDB schema:

const SubmitDebtSchema = new Schema ({
  creditCard: String,
  personalLoan: String,
  provider: String,
  balance: Number,
  limit: Number,
  monthly: Number,
  interest: Number,
  borrowed: Number
});

module.exports = mongoose.model('submitdebts', SubmitDebtSchema);

My 'child' component which uses props to fill the link using the response MongoDB ID.

<div className="debt-card-edit-container"><a className="debt-card-edit-link" href={`/edit/${props.edit}`}>Edit</a></div>

My 'parent' component which fills the prop in using a database call:

<IndividualDebtCard edit={debt._id} />

My 'fetch' serverless function:

const mongoose = require("mongoose");
const SubmitDebt = require("./submitDebtSchema");

require("dotenv").config();

mongoose.connect(process.env.MONGO_URI);
    
  module.exports = async (req, res) => {
      let id = req.params.id;
      await SubmitDebt.findById(id, function(err, submitdebts) {
        if (err) {
          console.log(err);
        }
        console.log(req.params.id)
        console.log(submitdebts);
        return res.status(200).json(submitdebts);
      });
  };

Finally, and most importantly, my actual 'edit' component in full...

    class EditDebt extends Component {
      constructor(props) {
        super(props)
    
        this.state = {
          provider: '',
          balance: '',
          limit: '',
          monthly: '',
          interest: '',
          borrowed: ''
        }
    
        this.onChange = this.onChange.bind(this);
      }
    
       componentDidMount() {
        axios.get("/api/fetchEditDebt")
          .then(response => {
            this.setState({
              provider: response.data.provider,
              balance: response.data.balance,
              limit: response.data.limit,
              monthly: response.data.monthly,
              interest: response.data.interest,
              borrowed: response.data.borrowed
            })
            console.log(res)
            console.log(this.state.provider)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    
      onChange = (e) => {
            this.setState({ [e.target.name]: e.target.value})
        }
    
      render() {
    
        return (
          <section className="edit-debt-section">
            <div className="edit-debt-container">

    
<input type="text" value={this.state.provider} onChange=.  {this.onChange} />


            </div>
          </section>
        )
      }
    }

Sorry about all of the code, and please let me know if I've missed anything which is really important in my question.

Thank you

EDIT: I've removed the 'this.props.match.params.id' and tried re-running my code.. I now get the following error in my back-end:

2020-10-23T14:55:25.984Z    71f7b650-1a7d-42c2-953e-ff17edc22cb5    ERROR   Unhandled Promise Rejection     {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: Cannot read property 'id' of undefined","reason":{"errorType":"TypeError","errorMessage":"Cannot read property 'id' of undefined","stack":["TypeError: Cannot read property 'id' of undefined","    at module.exports (/var/task/api/fetchEditDebt.js:12:23)","    at Server.<anonymous> (/var/task/___now_helpers.js:813:19)","    at Server.emit (events.js:315:20)","    at parserOnIncoming (_http_server.js:790:12)","    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: Cannot read property 'id' of undefined","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:327:22)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}
Unknown application error occurred