How to change Chakra ui Toast Component's position

Question

i wanna change toast to not just bottom but to the another box's bottom

i tried portal but i toast portal doesn't go under box component

this is what i tried

import { Button, CloseButton, Flex, Image, Portal, useDisclosure, useToast } from "@chakra-ui/react";

const toast = useToast();
const toastTest = ()=>{
const toastRef = useRef<HTMLButtonElement>(null);
return(
<Portal containerRef={toastRef}>
    <Flex width={"300px"} height={"300px"}>
        <Button
            onClick={() => {
                toast();
            }}
        >
            Show Toast2
        </Button>
    </Flex>
</Portal>
<Flex width={"100%"} height={"1300px"} backgroundColor={"green.100"}>
        asdfsdzf
<Flex width={"100px"} height={"100px"} backgroundColor={"red.100"} ref={toastRef}></Flex>
</Flex>)}

Answer 1

At the Chakra UI Docs youcan find the code for changing toasts position:

https://chakra-ui.com/docs/components/toast/usage#changing-the-toast-position

Basically you just have to use the toast method with the props, like this:

toast({
   position: 'top',
   title: 'Test Toast!',
   description: 'This is a test toast'
  })