NodeJS Issue with errors & trying to send custom error message

I am facing an issue with handling errors in my app. This is what my back-end is set up to send.

exports.getTVEvent = async (req, res) => {
    try {
        let response = await axios.get(``)
        if (response.data.tvevent === null) throw new Error("No Channel found")
        return res.status(200).send(response.data.tvevent)
    } catch (err) {
        return res.status(404).send(err.message)
    }
}

When I look back at the front-end of the app all I get is 404 Not Found and not the actual error message of No Channel Found

When I look at the body of the response this is what I get. My code below is a fetch hook I use throughout the app.

const getData = async () => {
    setIsPending(true);
    try {
        const res = await fetch(`http://localhost:3000/${url}`, {signal: controller.signal})
        console.log(res)
        if (!res.ok) throw new Error(res.statusText)
        const json = await res.json();
        setIsPending(false)
        setError(null);
        setData(json);
    } catch (err: unknown) {
        if (err instanceof Error) {
            if (err.name === "AbortError") {
                console.log("Fetch was aborted.")
            } else {
                console.log(err)
                setIsPending(false)
                setError('Error received from server: ' + err.message)
                console.log(err.message)
            }
        }
    }
}

getData();

I am not sure as to what I am doing wrong and why the front-end is not able to receive the back-end message. I have also tried to send the message within an object too return res.status(404).send({error: err.message}) if anyone has any ideas?