jest testing on react-hook-form - jestjs

Question

I have below react code and jest code but I am having trouble targeting the name input field using jest. I have set (data-testid="name") on the FormModal component but jest couldn't find it and returned with error ( TestingLibraryElementError: Unable to find an element by: [data-testid="name"]). I keep on debugging but couldn't find the problem.
FormModal.tsx
import { FunctionComponent } from "react";
import Modal from "react-modal";
import { useForm } from "react-hook-form";
export const InputField = styled.input`
width: 70%;
height: 25px;
border-radius: 5px;
&:focus {
border: 3px solid #89cff0;
outline: none;
}
`;
export const InputSpan = styled.div`
width: 30%;
`;
export const InputContainer = styled.div`
width: 100%;
display: flex;
margin: 15px 0px;
height: 30px;
align-items: center;
`;
return (
<form onSubmit={handleSubmit(onSubmit)}>
<InputContainer>
<InputSpan>Name:</InputSpan>
<InputField data-testid="name" {...register("name")}></InputField>
</InputContainer>
<ModalFooter>
<FormSubmit type="submit">Submit</FormSubmit>
<FormCancel onClick={props.openModal}>Cancel</FormCancel>
</ModalFooter>
</form>
);
};
Here is the jest test
FormModal.test.tsx
import { fireEvent, render, screen } from "#testing-library/react";
import FormModal from "../FormModal";
it("calls the onSubmit function without valid inputs", () => {
render(<FormModal />);
const createButton = screen.getByTestId("name");
expect(createButton).not.toBeNull();
});