I wanna render login or signup component based on dynamic routes but it is not rendering anything

"use client"
import React, { ReactElement, useState } from 'react';
import Navbar from '@/components/Navbar/Navbar';
import PhoneValidation from '@/components/PhoneValidation/PhoneValidation';
import Login from '@/components/Login/Login';
import Signup from '@/components/Signup/Signup';

interface AuthenticationProps {
  params: { component: string };
}

const Authentication: React.FC<AuthenticationProps> = ({ params }): ReactElement => {
  const [openVerification, setOpenVerification] = useState<boolean>(false);
  const { component } = params;


  return (
    <div>
      <Navbar />
      {component === 'login' && <Login />}
      {component === 'signup' && <Signup />}
      {openVerification && (
        <PhoneValidation
          openVerification={openVerification}
          setOpenVerification={setOpenVerification}
          onSendVerification={() => {}}
        />
      )}
    </div>
  );
};

export default Authentication;