On submits doesn't trigger a function in ReactJs - reactjs

Question

const CreateMessage = () => {
const disatch = useDispatch()
const chatR = useSelector(state => state.chat);
const { chat } = chatR;
const [text, setText] = useState("")
useEffect(()=>{
setText("")
},[chat])
function handleSubmit(event) {
event.preventDefault()
console.log(3333)
}
return (
<StyledCreateMessage id="myform" onSubmit={handleSubmit}>
<div className="searchForm">
{/* <input className='input' type="text" placeholder='Write a message...' /> */}
<textarea value={text} onChange={(e)=>setText(e.target.value)} spellCheck="false" className='input' placeholder='write a message...'></textarea>
</div>
<div className="send">
<Stack direction="row" spacing={1}>
<IconButton color="primary" sx={{color:"white"}} aria-label="upload picture" component="label">
<input hidden type="file" />
<AttachFileIcon />
</IconButton>
<IconButton color="primary" sx={{color:"white"}} aria-label="upload picture" component="label">
<input hidden type="file" accept='image/*' />
<PhotoCamera />
</IconButton>
<IconButton type="submit" form="myform" color="primary" sx={{color:"white"}} aria-label="upload picture" component="label">
<SendIcon />
</IconButton>
</Stack>
</div>
</StyledCreateMessage>
)
}
why when I clock
<IconButton type="submit" form="myform" color="primary" sx={{color:"white"}} aria-label="upload picture" component="label">
<SendIcon />
</IconButton>
It doesn't trigger handleSubmit

Answer 1

You need to add onClick={handleSubmit} to your IconButton.
Here is an example right from react docs: https://reactjs.org/docs/forms.html

Answer 2

Your form won't have the context of the button based on the way you have it set up.
There are a few things you can do
The button would have to be in the form itself, which seems like what you'd want.
Do the onClick solution mentioned above
Pass some state between the form component and the button, which seems difficult for something simple.