how can i provide minimun fixedwidth for date so that i can mention another values with date also like count for that date etc

[premiumash25Aug]

        <DateHeader unit="any" labelFormat= "MMMM" intervalRenderer={intervalRenderer} headerData={{ isMonth: true, currenDate: new Date()

i am using above to get count but i am unable to change size of that componenet as its overflowing
const intervalRenderer = ({ intervalContext, getIntervalProps, data, ...rest }) => {
const { interval } = intervalContext;
const { startTime, endTime } = interval;
const count = bookedCountPerDay(startTime);

return (
  <div
    {...getIntervalProps()}
    className={`rct-dateHeader ${data.isMonth ? "rct-dateHeader-primary" : ""

      }`}

    onClick={() => {
      return false;
    }}
  >
    <span
      style={{
        position: data.isMonth ? "sticky" : "static",
        marginRight: data.isMonth ? "auto" : "inherit",
        left: 10,
        padding: "0 5px",
        fontWeight: "bold",
        width: "100%",
        height: "100%",
        display: "flex",

        color: data.isMonth ? "white" : "black",
      }}
    >
      {count} "This is count"
    </span>
  </div>
);

};

[premiumash25Aug]

resolved via css but item renderer put <DateHeader
height={100}
intervalRenderer={intervalRenderer}
unit="day"
labelFormat="DD"
headerData={{
currentUnit: currentUnit,
visibleTimeStart: visibleTimeStart,
visibleTimeEnd: visibleTimeEnd
}}
/> const intervalRenderer = useIntervalRendererMemo(
({ getIntervalProps, intervalContext, data }) => {
const { interval } = intervalContext;
const { startTime } = interval;
let countItem = cardCountList.find(item => item.date === moment(startTime).format("YYYY-MM-DD"));
if (!countItem) {
return;
}
else {
const containerStyle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
};
const intervalStyle = {
backgroundColor: countItem ? "aqua" : "black",
};

    return (
      <div {...getIntervalProps()} style={intervalStyle} id={countItem ? "countItem" : "noCountItem"} className="booking-card" >
        <div style={containerStyle}>
          <div style={{ marginRight: "auto" }}>
            <strong>{moment(startTime).format("ddd D-MMM")}</strong>
            <label style={{ display: "block" }}>
              Booked : {countItem ? countItem.count : 0}
            </label>
            <label style={{ display: "block" }}>
              Wait List : 0
            </label>
          </div>
        </div>
      </div>
    );
  }
},
[cardCountList]

); but it puts extra memory pressure on ui