How to make LoaderAndError component which is type safe?

import React from 'react'
import { Loader } from './Loader'
import { PiSmileySadLight } from 'react-icons/pi';

interface LoaderAndErrorProps {
    loading: boolean,
    error: boolean
    children?: React.ReactNode
}

export const LoaderAndError: React.FC<LoaderAndErrorProps> = ({ error, loading, children }) => {


    if (loading) {
        return <div className='flex items-center justify-center flex-1'><Loader /></div>
    }

    if (error) {
        return <div className='flex items-center justify-center flex-1 gap-2'><PiSmileySadLight /> Some Error Getting Data!</div>
    }

    return (
        <>{children}</>
    )
}