Hidden Date Input Trigger Calendar OnClick

Simple problem but I am not sure if I think it right. I have a project on NextJS and want to make a date input but also have a custom placeholder and the input still be usable.
I have come to a stop, my current setup is that I have my Date Input hidden, and a paragraph displaying the placeholder I want…how do I make an OnClick event or a Ref to make the input usable by the user? Is there a way? Or else what can I do to also have a placeholder and a date input?

TypeScipt:

       <input
            type="date"
            name={label}
            id={label}
            value={date}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDate(e.currentTarget.value)}
            tabIndex={tabIndex}
            hidden
        />
        <p className={style.calendarFakeInput}>{placeholder}</p>

SCSS:

    .calendarFakeInput {
     color: $grey2;
     width: 100%;
     cursor: default;
    }
    input[type="date"] {
     position: relative;
     color: $grey2;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
     background: transparent;
     bottom: 0;
     color: transparent;
     cursor: pointer;
     height: auto;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     width: auto;
    }

On the parent component of these I tried this with no luck…

<div className={style.calendarInput} onClick={() => document.getElementById(`${label}`)?.click()}>