font text barcode not resize

const LayerBarcode: React.FunctionComponent = ({
uuid,
index,
layerIndex,
blockIndex,
opacity,
layers = [],d3-47b6-90a6-01740e983a9b)
...config
}) => {
const [url, setUrl] = useState<any | undefined>()
const layerConfig = config as ILayerBarCodeConfig
const barcodeRef = useRef<HTMLCanvasElement | null>(null)

useEffect(() => {
if (layerConfig?.barCodeValue) {
setUrl(layerConfig?.barCodeValue?.url)
}
}, [layerConfig?.barCodeValue])
const { width, height } = layerConfig.size || {}

useEffect(() => {
if (barcodeRef.current) {
JsBarcode(barcodeRef.current, url, {
text: layerConfig?.barCodeValue?.url,
format: layerConfig?.barCodeValue?.type,
width: 30,
lineColor: '#000',
height: height * 0.8,
displayValue: true,
background: '#ffffff',
textAlign: 'center',
fontSize: width * 0.1,
font: 'monospace',
})

  dispatchUpdateCurrentLayerConfig({ maxWidth: width, fontSize: '100px'  })
}

}, [url, layerConfig.size.height, layerConfig?.barCodeValue, height])

return (
<LayerLineStyled.Container>
<LayerLineStyled.OutputBox
className='output-box'
style={{
opacity: (opacity === undefined || opacity === null ? 100 : opacity) / 100,
}}
/>
<canvas ref={barcodeRef} style={{ maxWidth: '100%', minWidth: '10%', height: height }}>
</LayerLineStyled.Container>
)
}