Using useRef to assign focus to an element that conditionally exists - reactjs

Question

I am having some trouble trying to implement this functionality which creates an input field component upon clicking a button, and then assigning focus to the input field as well. I am getting an error saying that inputRef.current is undefined, and am not sure how to proceed.
export default function Post(props) {
const inputRef = React.useRef();
const [commentsToggle, setCommentsToggle] = React.useState(false);
function commentClickHandler() {
setCommentsToggle((prev) => !prev);
inputRef.current.focus();
}
return (
<div className="post">
<div className="postAuthor">
<Avatar
{...stringAvatar(`${props.post.author.username}`)}
alt={`${props.post.author.username}'s Avatar`}
src="./placeholder.jpg"
variant="rounded"
style={avatarStyle}
>
{props.post.author.username[0].toUpperCase()}
</Avatar>
<b>{props.post.author.username}</b> posted:
</div>
<p className="postContent">{props.post.content}</p>
<p className="postDate">{props.post.formatted_date}</p>
<span className="postButtonContainer">
<IconButton className="starsButton" onClick={starClickHandler}>
{props.post.stars.includes(userInfo.userID) ? (
<StarIcon />
) : (
<StarBorderIcon />
)}
{props.post.stars.length}
</IconButton>
<Tooltip title="Add a comment." placement="right">
<IconButton className="commentsButton" onClick={commentClickHandler}>
{commentsToggle ? <ChatBubbleIcon /> : <ChatBubbleOutlineIcon />}
{props.post.comments.length}
</IconButton>
</Tooltip>
</span>
<hr></hr>
<div>
<CommentList comments={props.post.comments}></CommentList>
{commentsToggle ? (
<NewCommentInput
ref={inputRef}
targetPostURL={props.post.url}
getUserData={props.getUserData}
setCommentsToggle={setCommentsToggle}
></NewCommentInput>
) : null}
</div>
</div>
);
}
The above is the code from my parent component, which will conditionally render the child component (the input) that I want to receive focus. Below is this input component:
const NewCommentInput = React.forwardRef((props, ref) => {
return (
<form className="commentInput" onSubmit={commentSubmitHandler}>
<TextField
ref={ref}
multiline
fullWidth
size="small"
name="comment"
placeholder="comment on this post..."
value={commentState.content}
onChange={commentChangeHandler}
></TextField>
<Button variant="outlined" onClick={commentSubmitHandler}>
Comment
</Button>
</form>
);
});
How can I solve inputRef.current being undefined when I click the button that create the component that has the ref?