cognito hosted signin in a basic react app not returning to app after sucessful authentication

Question

I started this project (called playdate for no reason) to learn react and a few new aws resources so I'm positive I'm doing something stupid wrong. I want to use cognito's hosted sign in, but I can't seem to figure out how to get my "Cognito successful sign in screen" to go back to the actual react app.

1. When I start my app.js I get my "main sign in page here" message, no problems. I hit sign in, I'm successfully routed to my cognito hosted sign in page and i can authenticate successfully. I'm then routed to the default cognito successful sign in screen, great. I want to return back to the app and see the "successful redirect" message and the button that only appears when successfully authenticated.
2. I've tried http://localhost:3000 in the callback url field after verifying that that's the port it starts on. I've also tried the default callback url, and for shits and giggles I tried the url that amplify gave me when I deployed this for the first time. No dice on any of those, and localhost breaks the flow, and replaces the hosted login with a "something unexpected went wrong" message. I've verified that whatever URL i was trying was the same in the code and in the cognito console.
3. this is my app.js:

import './App.css';
import { useAuth } from 'react-oidc-context';

function Playdate() {
  const auth = useAuth();

  const signOutRedirect = () => {
    const clientId = 'clientidhere';
    const logoutUri = 'thisFieldHasBeenAVarietyOfThings'; 
    const cognitoDomain = 'myactualcognitodomainhere'; 
    window.location.href = `${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${encodeURIComponent(logoutUri)}`;
  };

  if (auth.isLoading) {
    return <div>loading...</div>;
  }

  if (auth.error) {
    return <div>Error... {auth.error.message}</div>;
  }
const signInRedirect = () => {
  const redirectUri = 'thisFieldHasBeenAVarietyOfThings';
  auth.signinRedirect({ redirectUri });
};

  if (auth.isAuthenticated) {
    return (
      <div>
        <h1>playdateplaydateplaydate</h1>
        <p>hello  {auth.user?.profile.email}!</p>
        <p>sign in worked</p>
        <button onClick={() => auth.removeUser()}>sign out</button>
        <button>this button should appear if auth successfully redirected </button> 
      </div>
    );
  }

  return (
    <div>
      <h1>main sign in page here</h1>
      <button onClick={() => auth.signinRedirect()}>sign in</button>
      <button onClick={() => signOutRedirect()}>sign out</button>
    </div>
  );
}

export default Playdate;

all the fields here where i say it's been a few things are ones where I'm truly and genuinely not sure what putting there will yield a successful result. I read the docs and I took the suggestions to no success, and I can't seem to find any videos that can help with the hosted UI. I guess that service is relatively new. I've also tried all the suggestions that AI had at this point to no success. My closest to success has been with the correct clientID, the default cognito cloudfront URL it gives you when you set it up, my cognito domain as it's provided under branding>domain, and the const redirectUri being the default cognito cloudfront URL it gives you when you set it up. Thank you and I'm sorry in advance for anything stupid I'm misunderstanding