Why does my code thing deployed() is not a function?

Question

code:

 loadContract: async ()=>{
     //Create JS version of smart contract
     const todoList = await $.getJSON('TodoList.json')
     App.contracts.TodoList = TruffleContract(todoList)
     App.contracts.TodoList = web3.setProvider(new Web3.providers.HttpProvider("http://127.0.0.1:7545"))
 
 //getting values from blockchain
 App.todoList = await App.contracts.TodoList.deployed()
 console.log(todoList)

error:

TypeError: App.contracts.TodoList.deployed is not a function

I am able to call TodoList.deployed() in the truffle dev environment but not in the JavaScript file. I am trying to to set all the data from the deployed smart contract to App.todoList so I can work with the values in the JavaScript file and render them to the HTML. I am completely stuck. When I console.log(todolist) I receive the JSON of the smart contract.

Here is my migrations file.

//need migration to update state of blockchain

const TodoList = artifacts.require("./TodoList.sol");

module.exports = function (deployer) {
  deployer.deploy(TodoList);
};
//run migration and deploy contract to blockchain