Ask for hints with recoil and nextjs, issues in global state managment

Question

i'm making a donation app and i need the donors to be shown in a page. To do that i've set a recoil state to collect the amount the user wants to donate, then i'll include that number in the donors' list with a nickname choosed by the donor. My issue is how to select the key present in the default state and pass it trough my components, here i post my default state:

import { atom } from "recoil";

export const totalAtom = atom({
  key: "totalAtom",
  default: {
   total:0,
  } as Total,
});

the interface:

interface Total {
    total: number;
}

and this is how i'm setting the donation page, but i need to select the key total and i don't know how. Here is some code i already written:

export default function CheckoutForm(): JSX.Element {
  const [loading] = useState<boolean>(false);
  const [input, setInput] = useState<{ customDonation: number }>({
    customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
  });

  const [theAmount, setTheAmount] = useRecoilState(totalAtom);
 setTheAmount(input.customDonation)

  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
    e
  ): void =>
    setInput({
      ...input,
      [e.currentTarget.name]: e.currentTarget.value,
      
    });
    


  return (
.... )

as you can guess it gives me error in the setTotalAmount function saying: Argument of type 'number' is not assignable to parameter of type 'Total'. So i have some problem with global state managment, i used recoil thinking it would have been easier than redux, but i have not succeded to isolate the key "total" of the state and make it update trough components passing it trough them. Waiting for your suggestions hopefully.