How to create protected route with JWT authentication?

Question

I am working on an application and I would like to write a condition for auth but I am not able do that. I tried doing a basic authentication by check whether there is a token in local storage or not but I don't think that is sufficient. Because anyone can come and type "token" in the localstorage and access the page.

export const Protected = (props) => {
  const Component = props.Component;
  const navigate = useNavigate();

  useEffect(() => {
    let login = localStorage.getItem("token"); //Getting the bearer token from localstorage
    if (!login) {
      navigate("/signup");
    }
  }, [navigate]);

  return (
    <div>
      <Component />
    </div>
  );
};

I would like to use the JWT for the authentication. Would mean a lot if you can help.