Testing conditional rendering in child component

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }