There are two external resources and one custom JS file to load up into the component. The custom JS file should be executed only after the external resources. However, it doesn't really work this way even though defer keyword has been put on. It seems like the custom JS file is executed first. I wonder what's going wrong with this approach?

import React, { Fragment, useEffect, useRef } from "react";
import "./Home.css";
import { Helmet, HelmetProvider  } from 'react-helmet-async';
import ShowCase from "./ShowCase";
import BookCarousel from "./BookCarousel";
import Testimonial from "./Testimonial";
import SignUp from "./SignUp";
import Contact from "./Contact";
const Home = () => {

  return (
    <HelmetProvider>
        <Helmet>
            <script type="text/javascript" defer src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
            <script type="text/javascript" defer src="https://unpkg.com/scrollreveal" ></script>
            <script type="text/javascript" defer src="./carousel.js"></script>
        </Helmet>
        <ShowCase />
        <BookCarousel />
        <Testimonial />
        <SignUp />
        <Contact />
    </HelmetProvider>
  );
};
export default Home;