컴포넌트 작성 방식에 관한 질문입니다

안녕하세요
에러가 난 것은 아니고 컴포넌트 작성 방식이 괜찮은 건지 확인차 여쭤봅니다.

게시판 만들면서 보통 버튼 영역은 자주 쓰는 부분이니까 
컨포넌트를 분리해서 따로 만들었습니다.
버튼영역박스, 개별 버튼 이렇게 나눠서 import 해서 작성했는데
버튼영역박스에 개별 버튼을 props로 넣는 것이 좋은 방법인지 잘 모르겠습니다.
버튼에 onClick도 props를 줘서 작성을 하는 게 맞는 건지..
혹시 더 효율적인 방법이 있는 건지 확인 부탁드립니다.


write/page.js

"use client";
import { H2 } from "../components/Title";
import { DoubleBtn, MediumBtn } from "../components/Button";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function Write() {
    const router = useRouter();
    const getDate = () => {
        const today = new Date();
        const dd = String(today.getDate()).padStart(2, "0");
        const mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
        const yyyy = today.getFullYear();
        setDate(`${yyyy}-${mm}-${dd}`);
    };
    const [title, setTitle] = useState("");
    const [content, setContent] = useState("");
    const [date, setDate] = useState("");
    return (
        <>
            <H2 title="Write" />
            <form action="/api/write" method="POST">
                <div style={{ display: "grid", gridAutoFlow: "row", gridGap: "10px" }}>
                    <input type="hidden" name="date" value={date} />
                    <input
                        type="text"
                        placeholder="title"
                        style={{ lineHeight: "30px", padding: "0 10px" }}
                        name="title"
                        onChange={(e) => setTitle(e.target.value)}
                    />
                    <textarea
                        name="content"
                        cols="30"
                        rows="10"
                        placeholder="content"
                        style={{ lineHeight: "30px", padding: "0 10px" }}
                        onChange={(e) => setContent(e.target.value)}
                    ></textarea>
                    <DoubleBtn
                        children={[
                            <MediumBtn
                                type="button"
                                key="cancelBtn"
                                name="Cancel"
                                onClick={() => router.back()}
                            />,
                            <MediumBtn
                                type="submit"
                                key="submitBtn"
                                name="Submit"
                                onClick={() => getDate()}
                            />,
                        ]}
                    />
                </div>
            </form>
        </>
    );
}

- components/Button.js

"use client";
import { styled } from "styled-components";

const Button = styled.button`
    border: 1px solid #fff;
    border-radius: 3px;
    background: none;
    cursor: pointer;
`;
const SBtn = styled(Button)`
    font-size: 0.8rem;
    padding: 5px 10px;
`;
const MBtn = styled(Button)`
    font-size: 1rem;
    padding: 10px 15px;
`;
const WBtn = styled.div`
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px;
`;

function SmallBtn({ type, name, onClick }) {
    return (
        <SBtn type={type} onClick={onClick ? () => onClick : null}>
            {name}
        </SBtn>
    );
}

function MediumBtn({ type, name, onClick }) {
    return (
        <MBtn type={type} onClick={onClick ? onClick : null}>
            {name}
        </MBtn>
    );
}

function DoubleBtn({ children }) {
    return <WBtn>{children}</WBtn>;
}

export { SmallBtn, MediumBtn, DoubleBtn };