I'm encountering a problem with Mantine components not rendering correctly in my React application. Specifically, the TextInput fields are not showing up as expected. I've followed the documentation and examples provided by Mantine, but I'm still facing this issue.
<form
action="#"
className="contact-form"
onSubmit={(event) => {
event.preventDefault();
submit();
}}>
<h5 className="title">Contact us</h5>
<p className="description">
Feel free to contact us if you need any assistance, any help or
another question.
</p>
<TextInput
required
placeholder="Name"
value={values.name}
onChange={(event) =>
submit({ name: event.currentTarget.value })
}
error={errors.name && "Name is required"}
style={{ marginBottom: 10 }}
/>
<TextInput
required
placeholder="Email"
value={values.email}
onChange={(event) =>
submit({ email: event.currentTarget.value })
}
error={errors.email && "Please provide a valid email address"}
style={{
marginBottom: 10,
width: "200px",
height: "200px",
color: "black",
}}
/>
<Textarea
required
placeholder="Message"
value={values.message}
onChange={(event) =>
submit({ message: event.currentTarget.value })
}
error={errors.message && "Message is required"}
style={{ marginBottom: 10 }}
/>
<div className="submit-button-wrapper">
<Button type="submit" loading={pending} disabled={!validity}>
Send
</Button>
</div>
</form>
i tried increasing width and height but in invisible div kept growing without any text or input