Netlify functions not found on dev server

Question

I have followed several blogs and questions related to the same problem I am having. It is exactly like this question. However, I am still having issues.

So, I am running netlify dev and trying to access my netlify functions. I have a function in /netlify/functions/ping. The function works as intended when I access the randomized port for the netlify functions (something like localhost:55832...).

However, using the localhost:8888/.netlify/functions/ping gives me a 404 error.

Here is my /netlify/functions/ping file:

import { Handler } from '@netlify/functions';

const handler: Handler = async (event, context) => {

  return {
    statusCode: 200,
    body: JSON.stringify({ data: "pong" }),
  };
};

export { handler };

here is where I am trying to call my function on a page

export default function HomePage() {

  useEffect(() => {
    async function pingpong() {
      const res = await fetch(`/.netlify/functions/ping`);
      console.log(res);
    }

    pingpong();
  }, []);

  return (
...

I have also tried to alter my netlify.toml with the following

[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200
force = true