How to transition size of a dialog as content inside it changes?

[uuuulopta]

Consider the following:

function RouteComponent() {
    const [selected, setSelected] = useState<Number>(0);
    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button variant={"outline"}>Open dialog</Button>
            </DialogTrigger>

            <DialogContent
                className={"p-6 w-auto h-auto max-w-screen max-h-screen sm:max-w-screen"}>
                <div className={"flex justify-between w-[100px] "}>
                    <Button type={"button"} variant={"secondary"} onClick={() => setSelected(1)}>1</Button>
                    <Button type={"button"} variant={"secondary"} onClick={() => setSelected(2)}>2</Button>
                </div>
                <div>
                    {selected == 1 ? (<div className={"border border-indigo-500 w-[300px] h-[300px]"}></div>) : null}
                    {selected == 2 ? (<div className={"border border-indigo-500 w-[500px] h-[500px]"}></div>) : null}
                </div>
            </DialogContent>
        </Dialog>
    )
}

How would I go about making the dialog itself transition its size when the children get rendered? I have tried using pure css and framer-motion but just couldn't figure out how to make it work.

Any help is appreciated, thanks.