You could do it this way, assuming that your components are called Parent and Child:

export default function Parent(){
   const [firstName, setFirstName]=useState();
   const [lastName, setLastName]=useState();
   
   return (
     <Child firstName={firstName} lastName={lastName} />
   )

}

And you get them inside Child like so:

export default function Child(props){

  console.log(props.firstName, props.lastName)
  return <div></div>
}

If you mean that you want to pass firstName and lastName to child element, relevant to component where you declared the states then you just need to pass them as props

<Child firstName={firstName} lastName={lastName} />

and inside child you would access them like props

function Child(props){

console.log(props) //this will show props of child component, there are stored your statements

return(...something here...)
}

See the react docs for components and props

Components accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

When React sees an element representing a user-defined component, it passes JSX attributes (and children) to this component as a single object. We call this object “props”.

import { useState } from "react";

function ParentComponent() {
  const [firstName, setFirstName] = useState("John");
  const [lastName, setLastName] = useState("Smith");
  return (
    <div className="ParentComponent">
      <ChildComponent firstName={firstName} lastName={lastName} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div className="ChildComponent">
      <p>firstName: {props.firstName}</p>
      <p>lastName: {props.lastName}</p>
    </div>
  );
}

Demo