commenttForm submit 버튼 작동 에러

import { Form, Input, Button } from "antd";
import React, { useCallback, useState } from "react";
import useInput from "../hooks/useInput";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";

const CommentForm = ({ post }) => {
 const id = useSelector((state) => state.user.me?.id);
 const [commentText, onChangeCommentText] = useInput("");
 const onSubmitComment = useCallback(() => {
 console.log(post.id, commentText);
 }, [commentText]);

 return (
 <Form onFinish={onSubmitComment}>
<Form.Item style={{ position: "relative", margin: 0 }}>
<Input.TextArea
 value={commentText}
 onChange={onChangeCommentText}
 rows={4}
 />
<Button
 type="primary"
 htmlType="submit"
 style={{ position: "absolute", right: 0 }}
 >
삐약
</Button>
</Form.Item>
</Form>
 );
};

CommentForm.propTypes = {
post: PropTypes.object.isRequired,
};

export default CommentForm;

문제

button에 style객체 추가 이후 console.log가 찍히지 않는 현상

 style={{ position: "absolute", right: 0 }}

여기까지 쳤을 때는 작동을 하였으나

 style={{ position: "absolute", right: 0, bottom: -40 }}

bottom -40 을 추가하면 작동 안함

bottom 0 은 작동이 잘되는 것을 보니 마이너스 추가시 문제가 방생하는 것 같음

왜 그럴까요?ㅠㅠ

인프런 커뮤니티 질문&답변