Aquí tienes, usando el encabezado personalizado :

 () => { const [startDate, setStartDate] = useState(new Date()); return ( <DatePicker renderCustomHeader={({ monthDate, customHeaderCount, decreaseMonth, increaseMonth, }) => ( <div> <button className={ "react-datepicker__navigation react-datepicker__navigation--previous" } style={customHeaderCount === 1 ? { visibility: "hidden" } : null} onClick={decreaseMonth} > <span className={ "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous" } > {"<"} </span> </button> <span className="react-datepicker__current-month"> {monthDate.toLocaleString("en-US", { month: "short", year: "numeric", })} </span> <button className={ "react-datepicker__navigation react-datepicker__navigation--next" } style={customHeaderCount === 1 ? { visibility: "hidden" } : null} onClick={increaseMonth} > <span className={ "react-datepicker__navigation-icon react-datepicker__navigation-icon--next" } > {">"} </span> </button> </div> )} selected={startDate} onChange={(date) => setStartDate(date)} /> ); };